@mui/x-tree-view 8.22.0 → 8.24.0

package/esm/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/esm/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;

package/esm/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { getExpansionTrigger } from "../plugins/expansion/utils.js";
+import { TreeViewItemsPlugin } from "../plugins/items/index.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 function deriveStateFromParameters(parameters) {
+  return {
+    disabledItemsFocusable: parameters.disabledItemsFocusable ?? false,
+    domStructure: 'nested',
+    itemChildrenIndentation: parameters.itemChildrenIndentation ?? '12px',
+    providedTreeId: parameters.id,
+    // TODO: Fix
+    expansionTrigger: getExpansionTrigger({
+      isItemEditable: parameters.isItemEditable,
+      expansionTrigger: parameters.expansionTrigger
+    }),
+    disableSelection: parameters.disableSelection ?? false,
+    multiSelect: parameters.multiSelect ?? false,
+    checkboxSelection: parameters.checkboxSelection ?? false,
+    selectionPropagation: parameters.selectionPropagation ?? EMPTY_OBJECT
+  };
+}
+function applyModelInitialValue(controlledValue, defaultValue, fallback) {
+  if (controlledValue !== undefined) {
+    return controlledValue;
+  }
+  if (defaultValue !== undefined) {
+    return defaultValue;
+  }
+  return fallback;
+}
+export function createMinimalInitialState(parameters) {
+  return _extends({
+    treeId: undefined,
+    focusedItemId: null
+  }, deriveStateFromParameters(parameters), TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters), {
+    expandedItems: applyModelInitialValue(parameters.expandedItems, parameters.defaultExpandedItems, []),
+    selectedItems: applyModelInitialValue(parameters.selectedItems, parameters.defaultSelectedItems, parameters.multiSelect ? EMPTY_ARRAY : null)
+  });
+}
+let globalTreeViewDefaultId = 0;
+export const createTreeViewDefaultId = () => {
+  globalTreeViewDefaultId += 1;
+  return `mui-tree-view-${globalTreeViewDefaultId}`;
+};

package/esm/internals/MinimalTreeViewStore/TimeoutManager.d.ts

@@ -0,0 +1,9 @@
+export declare class TimeoutManager {
+  private timeoutIds;
+  private intervalIds;
+  startTimeout: (key: string, delay: number, fn: Function) => void;
+  startInterval: (key: string, delay: number, fn: Function) => void;
+  clearTimeout: (key: string) => void;
+  clearInterval: (key: string) => void;
+  clearAll: () => void;
+}

package/esm/internals/MinimalTreeViewStore/TimeoutManager.js

@@ -0,0 +1,39 @@
+export class TimeoutManager {
+  timeoutIds = (() => new Map())();
+  intervalIds = (() => new Map())();
+  startTimeout = (key, delay, fn) => {
+    this.clearTimeout(key);
+    const id = setTimeout(() => {
+      this.timeoutIds.delete(key);
+      fn();
+    }, delay); /* Node.js types are enabled in development */
+
+    this.timeoutIds.set(key, id);
+  };
+  startInterval = (key, delay, fn) => {
+    this.clearTimeout(key);
+    const id = setInterval(fn, delay); /* Node.js types are enabled in development */
+
+    this.intervalIds.set(key, id);
+  };
+  clearTimeout = key => {
+    const id = this.timeoutIds.get(key);
+    if (id != null) {
+      clearTimeout(id);
+      this.timeoutIds.delete(key);
+    }
+  };
+  clearInterval = key => {
+    const id = this.intervalIds.get(key);
+    if (id != null) {
+      clearInterval(id);
+      this.intervalIds.delete(key);
+    }
+  };
+  clearAll = () => {
+    this.timeoutIds.forEach(clearTimeout);
+    this.timeoutIds.clear();
+    this.intervalIds.forEach(clearInterval);
+    this.intervalIds.clear();
+  };
+}

package/esm/internals/MinimalTreeViewStore/TreeViewItemPluginManager.d.ts

@@ -0,0 +1,12 @@
+import { TreeItemWrapper, TreeViewAnyStore, TreeViewItemPlugin } from "../models/index.js";
+/**
+ * Manages the registration and application of plugins for the Tree Item.
+ * This will be replaced with a proper implementation in the future.
+ */
+export declare class TreeViewItemPluginManager<TStore extends TreeViewAnyStore> {
+  private itemPlugins;
+  private itemWrappers;
+  register: (plugin: TreeViewItemPlugin, wrapItem: TreeItemWrapper<TStore> | null) => void;
+  listPlugins: () => TreeViewItemPlugin[];
+  listWrappers: () => TreeItemWrapper<TStore>[];
+}

package/esm/internals/MinimalTreeViewStore/TreeViewItemPluginManager.js

@@ -0,0 +1,16 @@
+/**
+ * Manages the registration and application of plugins for the Tree Item.
+ * This will be replaced with a proper implementation in the future.
+ */
+export class TreeViewItemPluginManager {
+  itemPlugins = [];
+  itemWrappers = [];
+  register = (plugin, wrapItem) => {
+    this.itemPlugins.push(plugin);
+    if (wrapItem) {
+      this.itemWrappers.push(wrapItem);
+    }
+  };
+  listPlugins = () => this.itemPlugins;
+  listWrappers = () => this.itemWrappers;
+}

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

@@ -0,0 +1,2 @@
+export * from "./MinimalTreeViewStore.js";
+export * from "./MinimalTreeViewStore.types.js";

package/esm/internals/MinimalTreeViewStore/index.js

@@ -0,0 +1,2 @@
+export * from "./MinimalTreeViewStore.js";
+export * from "./MinimalTreeViewStore.types.js";

package/esm/internals/RichTreeViewStore/RichTreeViewStore.d.ts

@@ -0,0 +1,53 @@
+import { TreeViewValidItem } from "../../models/index.js";
+import { TreeViewLabelEditingPlugin } from "../plugins/labelEditing/index.js";
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
+import { RichTreeViewStoreParameters, RichTreeViewState } from "./RichTreeViewStore.types.js";
+export declare class ExtendableRichTreeViewStore<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined, State extends RichTreeViewState<R, Multiple> = RichTreeViewState<R, Multiple>, Parameters extends RichTreeViewStoreParameters<R, Multiple> = RichTreeViewStoreParameters<R, Multiple>> extends MinimalTreeViewStore<R, Multiple, State, Parameters> {
+  labelEditing: TreeViewLabelEditingPlugin;
+  /**
+   * Mapper of the RichTreeViewStore.
+   * Can be used by classes extending the RichTreeViewStore to create their own mapper.
+   */
+  static rawMapper: import("../index.js").TreeViewParametersToStateMapper<any, any, RichTreeViewState<any, any>, RichTreeViewStoreParameters<any, any>>;
+  buildPublicAPI(): {
+    setEditedItem: (itemId: import("../../index.js").TreeViewItemId | null) => void;
+    updateItemLabel: (itemId: import("../../index.js").TreeViewItemId, label: string) => void;
+    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;
+  };
+}
+export declare class RichTreeViewStore<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends ExtendableRichTreeViewStore<R, Multiple, RichTreeViewState<R, Multiple>, RichTreeViewStoreParameters<R, Multiple>> {
+  constructor(parameters: RichTreeViewStoreParameters<R, Multiple>);
+}

package/esm/internals/RichTreeViewStore/RichTreeViewStore.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { TreeViewLabelEditingPlugin } from "../plugins/labelEditing/index.js";
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
+import { parametersToStateMapper } from "./RichTreeViewStore.utils.js";
+export class ExtendableRichTreeViewStore extends MinimalTreeViewStore {
+  labelEditing = (() => new TreeViewLabelEditingPlugin(this))();
+
+  /**
+   * Mapper of the RichTreeViewStore.
+   * Can be used by classes extending the RichTreeViewStore to create their own mapper.
+   */
+  static rawMapper = (() => parametersToStateMapper)();
+  buildPublicAPI() {
+    return _extends({}, super.buildPublicAPI(), this.labelEditing.buildPublicAPI());
+  }
+}
+export class RichTreeViewStore extends ExtendableRichTreeViewStore {
+  constructor(parameters) {
+    super(parameters, 'RichTreeView', parametersToStateMapper);
+  }
+}

package/esm/internals/RichTreeViewStore/RichTreeViewStore.types.d.ts

@@ -0,0 +1,34 @@
+import { TreeViewItemId, TreeViewValidItem } from "../../models/index.js";
+import { MinimalTreeViewParameters, MinimalTreeViewState } from "../MinimalTreeViewStore/index.js";
+import { RichTreeViewLazyLoadedItemsStatus } from "../plugins/lazyLoading/index.js";
+export interface RichTreeViewState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends MinimalTreeViewState<R, Multiple> {
+  /**
+   * Determine if a given item can be edited.
+   */
+  isItemEditable: ((item: any) => boolean) | boolean;
+  /**
+   * The id of the item currently being edited.
+   */
+  editedItemId: string | null;
+  /**
+   * The status of the items loaded using lazy loading.
+   * Is null if lazy loading is not enabled.
+   */
+  lazyLoadedItems: RichTreeViewLazyLoadedItemsStatus | null;
+}
+export interface RichTreeViewStoreParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends MinimalTreeViewParameters<R, Multiple> {
+  /**
+   * 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);
+}

package/esm/internals/RichTreeViewStore/RichTreeViewStore.utils.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewParametersToStateMapper } from "../MinimalTreeViewStore/index.js";
+import { RichTreeViewStoreParameters, RichTreeViewState } from "./RichTreeViewStore.types.js";
+export declare const parametersToStateMapper: TreeViewParametersToStateMapper<any, any, RichTreeViewState<any, any>, RichTreeViewStoreParameters<any, any>>;

package/esm/internals/RichTreeViewStore/RichTreeViewStore.utils.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const deriveStateFromParameters = parameters => ({
+  isItemEditable: parameters.isItemEditable ?? false
+});
+export const parametersToStateMapper = {
+  getInitialState: (minimalInitialState, parameters) => _extends({}, minimalInitialState, deriveStateFromParameters(parameters), {
+    editedItemId: null,
+    lazyLoadedItems: null
+  }),
+  updateStateFromParameters: (newMinimalState, parameters) => {
+    const newState = _extends({}, newMinimalState, deriveStateFromParameters(parameters));
+    return newState;
+  },
+  shouldIgnoreItemsStateUpdate: () => false
+};

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

@@ -0,0 +1,3 @@
+export * from "./RichTreeViewStore.js";
+export * from "./RichTreeViewStore.types.js";
+export * from "./RichTreeViewStore.utils.js";

package/esm/internals/RichTreeViewStore/index.js

@@ -0,0 +1,3 @@
+export * from "./RichTreeViewStore.js";
+export * from "./RichTreeViewStore.types.js";
+export * from "./RichTreeViewStore.utils.js";

package/esm/internals/SimpleTreeViewStore/SimpleTreeViewStore.d.ts

@@ -0,0 +1,8 @@
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
+import { InnerSimpleTreeViewParameters, SimpleTreeViewItem, SimpleTreeViewStoreParameters, SimpleTreeViewState } from "./SimpleTreeViewStore.types.js";
+import { TreeViewJSXItemsPlugin } from "../plugins/jsxItems/index.js";
+export declare class SimpleTreeViewStore<Multiple extends boolean | undefined> extends MinimalTreeViewStore<SimpleTreeViewItem, Multiple, SimpleTreeViewState<Multiple>, InnerSimpleTreeViewParameters<Multiple>> {
+  jsxItems: TreeViewJSXItemsPlugin;
+  constructor(parameters: SimpleTreeViewStoreParameters<Multiple>);
+  updateStateFromParameters(parameters: SimpleTreeViewStoreParameters<Multiple>): void;
+}

package/esm/internals/SimpleTreeViewStore/SimpleTreeViewStore.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
+import { TreeViewJSXItemsPlugin } from "../plugins/jsxItems/index.js";
+import { parametersToStateMapper } from "./SimpleTreeViewStore.utils.js";
+export class SimpleTreeViewStore extends MinimalTreeViewStore {
+  jsxItems = (() => new TreeViewJSXItemsPlugin(this))();
+  constructor(parameters) {
+    super(_extends({}, parameters, {
+      items: EMPTY_ARRAY
+    }), 'SimpleTreeView', parametersToStateMapper);
+  }
+  updateStateFromParameters(parameters) {
+    super.updateStateFromParameters(_extends({}, parameters, {
+      items: EMPTY_ARRAY
+    }));
+  }
+}

package/esm/internals/SimpleTreeViewStore/SimpleTreeViewStore.types.d.ts

@@ -0,0 +1,9 @@
+import { MinimalTreeViewParameters, MinimalTreeViewState } from "../MinimalTreeViewStore/index.js";
+export interface SimpleTreeViewState<Multiple extends boolean | undefined> extends MinimalTreeViewState<SimpleTreeViewItem, Multiple> {}
+export interface InnerSimpleTreeViewParameters<Multiple extends boolean | undefined> extends MinimalTreeViewParameters<SimpleTreeViewItem, Multiple> {}
+export interface SimpleTreeViewStoreParameters<Multiple extends boolean | undefined> extends Omit<InnerSimpleTreeViewParameters<Multiple>, 'items' | 'isItemDisabled' | 'isItemSelectionDisabled' | 'getItemLabel' | 'getItemChildren' | 'getItemId'> {}
+export interface SimpleTreeViewItem {
+  id: string;
+  label: string;
+  children?: SimpleTreeViewItem[];
+}

package/esm/internals/SimpleTreeViewStore/SimpleTreeViewStore.utils.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewParametersToStateMapper } from "../MinimalTreeViewStore/index.js";
+import { InnerSimpleTreeViewParameters, SimpleTreeViewState } from "./SimpleTreeViewStore.types.js";
+export declare const parametersToStateMapper: TreeViewParametersToStateMapper<any, any, SimpleTreeViewState<any>, InnerSimpleTreeViewParameters<any>>;

package/esm/internals/SimpleTreeViewStore/SimpleTreeViewStore.utils.js

@@ -0,0 +1,5 @@
+export const parametersToStateMapper = {
+  getInitialState: minimalInitialState => minimalInitialState,
+  updateStateFromParameters: newMinimalState => newMinimalState,
+  shouldIgnoreItemsStateUpdate: () => true
+};

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

@@ -0,0 +1,2 @@
+export * from "./SimpleTreeViewStore.js";
+export * from "./SimpleTreeViewStore.types.js";

package/esm/internals/SimpleTreeViewStore/index.js

@@ -0,0 +1,2 @@
+export * from "./SimpleTreeViewStore.js";
+export * from "./SimpleTreeViewStore.types.js";

package/esm/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
 import { TreeViewItemId } from "../../models/index.js";
-import { TreeViewState } from "../models/index.js";
-import type { UseTreeViewItemsSignature } from "../plugins/useTreeViewItems/index.js";
-export declare const TreeViewItemDepthContext: React.Context<number | ((state: TreeViewState<[UseTreeViewItemsSignature]>, itemId: TreeViewItemId) => number)>;
+import { MinimalTreeViewState } from "../MinimalTreeViewStore/index.js";
+export declare const TreeViewItemDepthContext: React.Context<number | ((state: MinimalTreeViewState<any, any>, itemId: TreeViewItemId) => number)>;