@mui/x-tree-view 6.0.0-alpha.3 → 6.0.0-beta.0

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { populateInstance } from '../../useTreeView/useTreeView.utils';
+import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
+export const useTreeViewNodes = ({
+  instance,
+  params
+}) => {
+  const nodeMap = React.useRef({});
+  const getNode = React.useCallback(nodeId => nodeMap.current[nodeId], []);
+  const insertNode = React.useCallback(node => {
+    nodeMap.current[node.id] = node;
+  }, []);
+  const removeNode = React.useCallback(nodeId => {
+    const newMap = _extends({}, nodeMap.current);
+    delete newMap[nodeId];
+    nodeMap.current = newMap;
+    publishTreeViewEvent(instance, 'removeNode', {
+      id: nodeId
+    });
+  }, [instance]);
+  const isNodeDisabled = React.useCallback(nodeId => {
+    if (nodeId == null) {
+      return false;
+    }
+    let node = instance.getNode(nodeId);
+
+    // This can be called before the node has been added to the node map.
+    if (!node) {
+      return false;
+    }
+    if (node.disabled) {
+      return true;
+    }
+    while (node.parentId != null) {
+      node = instance.getNode(node.parentId);
+      if (node.disabled) {
+        return true;
+      }
+    }
+    return false;
+  }, [instance]);
+  const getChildrenIds = useEventCallback(nodeId => Object.values(nodeMap.current).filter(node => node.parentId === nodeId).sort((a, b) => a.index - b.index).map(child => child.id));
+  const getNavigableChildrenIds = nodeId => {
+    let childrenIds = instance.getChildrenIds(nodeId);
+    if (!params.disabledItemsFocusable) {
+      childrenIds = childrenIds.filter(node => !instance.isNodeDisabled(node));
+    }
+    return childrenIds;
+  };
+  populateInstance(instance, {
+    getNode,
+    updateNode: insertNode,
+    removeNode,
+    getChildrenIds,
+    getNavigableChildrenIds,
+    isNodeDisabled
+  });
+};

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.d.ts

@@ -0,0 +1,27 @@
+import { TreeViewNode, DefaultizedProps, TreeViewPluginSignature } from '../../models';
+export interface UseTreeViewNodesInstance {
+    getNode: (nodeId: string) => TreeViewNode;
+    updateNode: (node: TreeViewNode) => void;
+    removeNode: (nodeId: string) => void;
+    getChildrenIds: (nodeId: string | null) => string[];
+    getNavigableChildrenIds: (nodeId: string | null) => string[];
+    isNodeDisabled: (nodeId: string | null) => nodeId is string;
+}
+export interface UseTreeViewNodesParameters {
+    /**
+     * If `true`, will allow focus on disabled items.
+     * @default false
+     */
+    disabledItemsFocusable?: boolean;
+}
+export type UseTreeViewNodesDefaultizedParameters = DefaultizedProps<UseTreeViewNodesParameters, 'disabledItemsFocusable'>;
+interface UseTreeViewNodesEventLookup {
+    removeNode: {
+        params: {
+            id: string;
+        };
+    };
+}
+export type UseTreeViewNodesSignature = TreeViewPluginSignature<UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, UseTreeViewNodesInstance, UseTreeViewNodesEventLookup, {}, never, [
+]>;
+export {};

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/internals/plugins/useTreeViewSelection/index.js

@@ -0,0 +1 @@
+export { useTreeViewSelection } from './useTreeViewSelection';

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

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

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -0,0 +1,172 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { populateInstance, getNextNode, getFirstNode, getLastNode } from '../../useTreeView/useTreeView.utils';
+import { findOrderInTremauxTree } from './useTreeViewSelection.utils';
+export const useTreeViewSelection = ({
+  instance,
+  params,
+  models
+}) => {
+  const lastSelectedNode = React.useRef(null);
+  const lastSelectionWasRange = React.useRef(false);
+  const currentRangeSelection = React.useRef([]);
+  const isNodeSelected = nodeId => Array.isArray(models.selected.value) ? models.selected.value.indexOf(nodeId) !== -1 : models.selected.value === nodeId;
+  const selectNode = (event, nodeId, multiple = false) => {
+    if (params.disableSelection) {
+      return;
+    }
+    if (multiple) {
+      if (Array.isArray(models.selected.value)) {
+        let newSelected;
+        if (models.selected.value.indexOf(nodeId) !== -1) {
+          newSelected = models.selected.value.filter(id => id !== nodeId);
+        } else {
+          newSelected = [nodeId].concat(models.selected.value);
+        }
+        if (params.onNodeSelect) {
+          params.onNodeSelect(event, newSelected);
+        }
+        models.selected.setValue(newSelected);
+      }
+    } else {
+      const newSelected = params.multiSelect ? [nodeId] : nodeId;
+      if (params.onNodeSelect) {
+        params.onNodeSelect(event, newSelected);
+      }
+      models.selected.setValue(newSelected);
+    }
+    lastSelectedNode.current = nodeId;
+    lastSelectionWasRange.current = false;
+    currentRangeSelection.current = [];
+  };
+  const getNodesInRange = (nodeAId, nodeBId) => {
+    const [first, last] = findOrderInTremauxTree(instance, nodeAId, nodeBId);
+    const nodes = [first];
+    let current = first;
+    while (current !== last) {
+      current = getNextNode(instance, current);
+      nodes.push(current);
+    }
+    return nodes;
+  };
+  const handleRangeArrowSelect = (event, nodes) => {
+    let base = models.selected.value.slice();
+    const {
+      start,
+      next,
+      current
+    } = nodes;
+    if (!next || !current) {
+      return;
+    }
+    if (currentRangeSelection.current.indexOf(current) === -1) {
+      currentRangeSelection.current = [];
+    }
+    if (lastSelectionWasRange.current) {
+      if (currentRangeSelection.current.indexOf(next) !== -1) {
+        base = base.filter(id => id === start || id !== current);
+        currentRangeSelection.current = currentRangeSelection.current.filter(id => id === start || id !== current);
+      } else {
+        base.push(next);
+        currentRangeSelection.current.push(next);
+      }
+    } else {
+      base.push(next);
+      currentRangeSelection.current.push(current, next);
+    }
+    if (params.onNodeSelect) {
+      params.onNodeSelect(event, base);
+    }
+    models.selected.setValue(base);
+  };
+  const handleRangeSelect = (event, nodes) => {
+    let base = models.selected.value.slice();
+    const {
+      start,
+      end
+    } = nodes;
+    // If last selection was a range selection ignore nodes that were selected.
+    if (lastSelectionWasRange.current) {
+      base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
+    }
+    let range = getNodesInRange(start, end);
+    range = range.filter(node => !instance.isNodeDisabled(node));
+    currentRangeSelection.current = range;
+    let newSelected = base.concat(range);
+    newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
+    if (params.onNodeSelect) {
+      params.onNodeSelect(event, newSelected);
+    }
+    models.selected.setValue(newSelected);
+  };
+  const selectRange = (event, nodes, stacked = false) => {
+    if (params.disableSelection) {
+      return;
+    }
+    const {
+      start = lastSelectedNode.current,
+      end,
+      current
+    } = nodes;
+    if (stacked) {
+      handleRangeArrowSelect(event, {
+        start,
+        next: end,
+        current
+      });
+    } else if (start != null && end != null) {
+      handleRangeSelect(event, {
+        start,
+        end
+      });
+    }
+    lastSelectionWasRange.current = true;
+  };
+  const rangeSelectToFirst = (event, nodeId) => {
+    if (!lastSelectedNode.current) {
+      lastSelectedNode.current = nodeId;
+    }
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    instance.selectRange(event, {
+      start,
+      end: getFirstNode(instance)
+    });
+  };
+  const rangeSelectToLast = (event, nodeId) => {
+    if (!lastSelectedNode.current) {
+      lastSelectedNode.current = nodeId;
+    }
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    instance.selectRange(event, {
+      start,
+      end: getLastNode(instance)
+    });
+  };
+  populateInstance(instance, {
+    isNodeSelected,
+    selectNode,
+    selectRange,
+    rangeSelectToLast,
+    rangeSelectToFirst
+  });
+  return {
+    getRootProps: () => ({
+      'aria-multiselectable': params.multiSelect
+    })
+  };
+};
+useTreeViewSelection.models = {
+  selected: {
+    controlledProp: 'selected',
+    defaultProp: 'defaultSelected'
+  }
+};
+const DEFAULT_SELECTED = [];
+useTreeViewSelection.getDefaultizedParams = params => {
+  var _params$disableSelect, _params$multiSelect, _params$defaultSelect;
+  return _extends({}, params, {
+    disableSelection: (_params$disableSelect = params.disableSelection) != null ? _params$disableSelect : false,
+    multiSelect: (_params$multiSelect = params.multiSelect) != null ? _params$multiSelect : false,
+    defaultSelected: (_params$defaultSelect = params.defaultSelected) != null ? _params$defaultSelect : params.multiSelect ? DEFAULT_SELECTED : null
+  });
+};

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { DefaultizedProps, TreeViewItemRange, TreeViewPluginSignature } from '../../models';
+import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
+export interface UseTreeViewSelectionInstance {
+    isNodeSelected: (nodeId: string) => boolean;
+    selectNode: (event: React.SyntheticEvent, nodeId: string, multiple?: boolean) => void;
+    selectRange: (event: React.SyntheticEvent, nodes: TreeViewItemRange, stacked?: boolean) => void;
+    rangeSelectToFirst: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string) => void;
+    rangeSelectToLast: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: 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 node ids. (Uncontrolled)
+     * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+     * @default []
+     */
+    defaultSelected?: TreeViewSelectionValue<Multiple>;
+    /**
+     * Selected node ids. (Controlled)
+     * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+     */
+    selected?: TreeViewSelectionValue<Multiple>;
+    /**
+     * If true `ctrl` and `shift` will trigger multiselect.
+     * @default false
+     */
+    multiSelect?: Multiple;
+    /**
+     * Callback fired when tree items are selected/unselected.
+     * @param {React.SyntheticEvent} event The event source of the callback
+     * @param {string[] | string} nodeIds Ids of the selected nodes. When `multiSelect` is true
+     * this is an array of strings; when false (default) a string.
+     */
+    onNodeSelect?: (event: React.SyntheticEvent, nodeIds: Exclude<TreeViewSelectionValue<Multiple>, null>) => void;
+}
+export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelected' | 'multiSelect'>;
+export type UseTreeViewSelectionSignature<Multiple extends boolean | undefined> = TreeViewPluginSignature<UseTreeViewSelectionParameters<Multiple>, UseTreeViewSelectionDefaultizedParameters<Multiple extends undefined ? false : Multiple>, UseTreeViewSelectionInstance, {}, {}, 'selected', [
+    UseTreeViewNodesSignature,
+    UseTreeViewExpansionSignature,
+    UseTreeViewNodesSignature
+]>;
+export {};

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import { TreeViewInstance } from '../../models';
+import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the nodes between the two border nodes.
+ *
+ * It finds the nodes' 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 nodeA and NodeB
+ * so we can compare their indexes to work out which node comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which node is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>, nodeAId: string, nodeBId: string) => string[];

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js

@@ -0,0 +1,55 @@
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the nodes between the two border nodes.
+ *
+ * It finds the nodes' 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 nodeA and NodeB
+ * so we can compare their indexes to work out which node comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which node is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+export const findOrderInTremauxTree = (instance, nodeAId, nodeBId) => {
+  if (nodeAId === nodeBId) {
+    return [nodeAId, nodeBId];
+  }
+  const nodeA = instance.getNode(nodeAId);
+  const nodeB = instance.getNode(nodeBId);
+  if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {
+    return nodeB.parentId === nodeA.id ? [nodeA.id, nodeB.id] : [nodeB.id, nodeA.id];
+  }
+  const aFamily = [nodeA.id];
+  const bFamily = [nodeB.id];
+  let aAncestor = nodeA.parentId;
+  let bAncestor = nodeB.parentId;
+  let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+  let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+  let continueA = true;
+  let continueB = true;
+  while (!bAncestorIsCommon && !aAncestorIsCommon) {
+    if (continueA) {
+      aFamily.push(aAncestor);
+      aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+      continueA = aAncestor !== null;
+      if (!aAncestorIsCommon && continueA) {
+        aAncestor = instance.getNode(aAncestor).parentId;
+      }
+    }
+    if (continueB && !aAncestorIsCommon) {
+      bFamily.push(bAncestor);
+      bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+      continueB = bAncestor !== null;
+      if (!bAncestorIsCommon && continueB) {
+        bAncestor = instance.getNode(bAncestor).parentId;
+      }
+    }
+  }
+  const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
+  const ancestorFamily = instance.getChildrenIds(commonAncestor);
+  const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
+  const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
+  return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [nodeAId, nodeBId] : [nodeBId, nodeAId];
+};

package/internals/useTreeView/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeView } from './useTreeView';
+export type { UseTreeViewParameters, UseTreeViewDefaultizedParameters } from './useTreeView.types';

package/internals/useTreeView/index.js

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

package/internals/useTreeView/useTreeView.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures } from '../models';
+import { UseTreeViewParameters, UseTreeViewReturnValue } from './useTreeView.types';
+export declare const useTreeView: <Plugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]>(inParams: UseTreeViewParameters<Plugins>) => UseTreeViewReturnValue<ConvertPluginsIntoSignatures<Plugins>>;

package/internals/useTreeView/useTreeView.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import { DEFAULT_TREE_VIEW_CONTEXT_VALUE } from '../TreeViewProvider/TreeViewContext';
+import { useTreeViewModels } from './useTreeViewModels';
+import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
+export const useTreeView = inParams => {
+  const plugins = [...TREE_VIEW_CORE_PLUGINS, ...inParams.plugins];
+  const params = plugins.reduce((acc, plugin) => {
+    if (plugin.getDefaultizedParams) {
+      return plugin.getDefaultizedParams(acc);
+    }
+    return acc;
+  }, inParams);
+  const models = useTreeViewModels(plugins, params);
+  const instanceRef = React.useRef({});
+  const instance = instanceRef.current;
+  const innerRootRef = React.useRef(null);
+  const handleRootRef = useForkRef(innerRootRef, inParams.rootRef);
+  const [state, setState] = React.useState(() => {
+    const temp = {};
+    plugins.forEach(plugin => {
+      if (plugin.getInitialState) {
+        Object.assign(temp, plugin.getInitialState(params));
+      }
+    });
+    return temp;
+  });
+  const rootPropsGetters = [];
+  let contextValue = DEFAULT_TREE_VIEW_CONTEXT_VALUE;
+  const runPlugin = plugin => {
+    const pluginResponse = plugin({
+      instance,
+      params,
+      state,
+      setState,
+      rootRef: innerRootRef,
+      models
+    }) || {};
+    if (pluginResponse.getRootProps) {
+      rootPropsGetters.push(pluginResponse.getRootProps);
+    }
+    if (pluginResponse.contextValue) {
+      contextValue = pluginResponse.contextValue;
+    }
+  };
+  plugins.forEach(runPlugin);
+  const getRootProps = (otherHandlers = {}) => {
+    const rootProps = _extends({
+      role: 'tree',
+      tabIndex: 0
+    }, otherHandlers, {
+      ref: handleRootRef
+    });
+    rootPropsGetters.forEach(rootPropsGetter => {
+      Object.assign(rootProps, rootPropsGetter(otherHandlers));
+    });
+    return rootProps;
+  };
+  return {
+    getRootProps,
+    rootRef: handleRootRef,
+    contextValue
+  };
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { EventHandlers } from '@mui/base/utils';
+import type { TreeViewContextValue } from '../TreeViewProvider';
+import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures, MergePluginsProperty } from '../models';
+export type UseTreeViewParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = {
+    rootRef?: React.Ref<HTMLUListElement> | undefined;
+    plugins: TPlugins;
+} & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'params'>;
+export type UseTreeViewDefaultizedParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = {
+    rootRef?: React.Ref<HTMLUListElement> | undefined;
+    plugins: TPlugins;
+} & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'defaultizedParams'>;
+export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-activedescendant' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
+    ref: React.Ref<HTMLUListElement>;
+}
+export interface UseTreeViewReturnValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
+    getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseTreeViewRootSlotProps;
+    rootRef: React.RefCallback<HTMLUListElement> | null;
+    contextValue: TreeViewContextValue<TPlugins>;
+}

package/internals/useTreeView/useTreeView.types.js

@@ -0,0 +1 @@
+export {};

package/internals/useTreeView/useTreeView.utils.d.ts

@@ -0,0 +1,8 @@
+import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewUsedInstance } from '../models';
+import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
+import type { UseTreeViewNodesSignature } from '../plugins/useTreeViewNodes';
+export declare const getPreviousNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature, UseTreeViewExpansionSignature]>, nodeId: string) => string | null;
+export declare const getNextNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>, nodeId: string) => string | null;
+export declare const getLastNode: (instance: TreeViewInstance<[UseTreeViewExpansionSignature, UseTreeViewNodesSignature]>) => string;
+export declare const getFirstNode: (instance: TreeViewInstance<[UseTreeViewNodesSignature]>) => string;
+export declare const populateInstance: <T extends TreeViewAnyPluginSignature>(instance: TreeViewUsedInstance<T>, methods: T["instance"]) => void;

package/internals/useTreeView/useTreeView.utils.js

@@ -0,0 +1,43 @@
+export const getPreviousNode = (instance, nodeId) => {
+  const node = instance.getNode(nodeId);
+  const siblings = instance.getNavigableChildrenIds(node.parentId);
+  const nodeIndex = siblings.indexOf(nodeId);
+  if (nodeIndex === 0) {
+    return node.parentId;
+  }
+  let currentNode = siblings[nodeIndex - 1];
+  while (instance.isNodeExpanded(currentNode) && instance.getNavigableChildrenIds(currentNode).length > 0) {
+    currentNode = instance.getNavigableChildrenIds(currentNode).pop();
+  }
+  return currentNode;
+};
+export const getNextNode = (instance, nodeId) => {
+  // If expanded get first child
+  if (instance.isNodeExpanded(nodeId) && instance.getNavigableChildrenIds(nodeId).length > 0) {
+    return instance.getNavigableChildrenIds(nodeId)[0];
+  }
+  let node = instance.getNode(nodeId);
+  while (node != null) {
+    // Try to get next sibling
+    const siblings = instance.getNavigableChildrenIds(node.parentId);
+    const nextSibling = siblings[siblings.indexOf(node.id) + 1];
+    if (nextSibling) {
+      return nextSibling;
+    }
+
+    // If the sibling does not exist, go up a level to the parent and try again.
+    node = instance.getNode(node.parentId);
+  }
+  return null;
+};
+export const getLastNode = instance => {
+  let lastNode = instance.getNavigableChildrenIds(null).pop();
+  while (instance.isNodeExpanded(lastNode)) {
+    lastNode = instance.getNavigableChildrenIds(lastNode).pop();
+  }
+  return lastNode;
+};
+export const getFirstNode = instance => instance.getNavigableChildrenIds(null)[0];
+export const populateInstance = (instance, methods) => {
+  Object.assign(instance, methods);
+};

package/internals/useTreeView/useTreeViewModels.d.ts

@@ -0,0 +1,6 @@
+import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures, MergePluginsProperty } from '../models';
+/**
+ * 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: <TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]>(plugins: TPlugins, props: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "defaultizedParams">) => MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, "models">;

package/internals/useTreeView/useTreeViewModels.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+/**
+ * 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 const useTreeViewModels = (plugins, props) => {
+  const modelsRef = React.useRef({});
+  const [modelsState, setModelsState] = React.useState(() => {
+    const initialState = {};
+    plugins.forEach(plugin => {
+      if (plugin.models) {
+        Object.entries(plugin.models).forEach(([modelName, model]) => {
+          modelsRef.current[modelName] = {
+            controlledProp: model.controlledProp,
+            defaultProp: model.defaultProp,
+            isControlled: props[model.controlledProp] !== undefined
+          };
+          initialState[modelName] = props[model.defaultProp];
+        });
+      }
+    });
+    return initialState;
+  });
+  const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
+    const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
+    return [modelName, {
+      value,
+      setValue: newValue => {
+        if (!model.isControlled) {
+          setModelsState(prevState => _extends({}, prevState, {
+            [modelName]: newValue
+          }));
+        }
+      }
+    }];
+  }));
+
+  // We know that `modelsRef` do not vary across renders.
+  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+  if (process.env.NODE_ENV !== 'production') {
+    Object.entries(modelsRef.current).forEach(([modelName, model]) => {
+      const controlled = props[model.controlledProp];
+      const defaultProp = props[model.defaultProp];
+      React.useEffect(() => {
+        if (model.isControlled !== (controlled !== undefined)) {
+          console.error([`MUI: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of TreeView to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + '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'].join('\n'));
+        }
+      }, [controlled]);
+      const {
+        current: defaultValue
+      } = React.useRef(defaultProp);
+      React.useEffect(() => {
+        if (!model.isControlled && defaultValue !== defaultProp) {
+          console.error([`MUI: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
+        }
+      }, [JSON.stringify(defaultValue)]);
+    });
+  }
+  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
+
+  return models;
+};

package/internals/utils/EventManager.d.ts

@@ -0,0 +1,29 @@
+export type EventListener = (...args: any[]) => void;
+export interface EventListenerOptions {
+    isFirst?: boolean;
+}
+interface EventListenerCollection {
+    /**
+     * List of listeners to run before the others
+     * They are run in the opposite order of the registration order
+     */
+    highPriority: Map<EventListener, true>;
+    /**
+     * List of events to run after the high priority listeners
+     * They are run in the registration order
+     */
+    regular: Map<EventListener, true>;
+}
+export declare class EventManager {
+    maxListeners: number;
+    warnOnce: boolean;
+    events: {
+        [eventName: string]: EventListenerCollection;
+    };
+    on(eventName: string, listener: EventListener, options?: EventListenerOptions): void;
+    removeListener(eventName: string, listener: EventListener): void;
+    removeAllListeners(): void;
+    emit(eventName: string, ...args: any[]): void;
+    once(eventName: string, listener: EventListener): void;
+}
+export {};