@mui/x-tree-view 6.0.0-alpha.2 → 6.0.0-alpha.4

package/legacy/TreeView/TreeView.js

@@ -1,19 +1,15 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["children", "className", "defaultCollapseIcon", "defaultEndIcon", "defaultExpanded", "defaultExpandIcon", "defaultParentIcon", "defaultSelected", "disabledItemsFocusable", "disableSelection", "expanded", "id", "multiSelect", "onBlur", "onFocus", "onKeyDown", "onNodeFocus", "onNodeSelect", "onNodeToggle", "selected"];
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabledItemsFocusable", "expanded", "defaultExpanded", "onNodeToggle", "onNodeFocus", "disableSelection", "defaultSelected", "selected", "multiSelect", "onNodeSelect", "id", "defaultCollapseIcon", "defaultEndIcon", "defaultExpandIcon", "defaultParentIcon", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { styled, useTheme, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import useControlled from '@mui/utils/useControlled';
-import useForkRef from '@mui/utils/useForkRef';
-import ownerDocument from '@mui/utils/ownerDocument';
-import useId from '@mui/utils/useId';
-import { TreeViewContext } from './TreeViewContext';
-import { DescendantProvider } from './descendants';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { useSlotProps } from '@mui/base/utils';
 import { getTreeViewUtilityClass } from './treeViewClasses';
+import { useTreeView } from '../internals/useTreeView';
+import { TreeViewProvider } from '../internals/TreeViewProvider';
+import { DEFAULT_TREE_VIEW_PLUGINS } from '../internals/plugins';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -34,772 +30,75 @@ var TreeViewRoot = styled('ul', {
   listStyle: 'none',
   outline: 0
 });
-function isPrintableCharacter(string) {
-  return string && string.length === 1 && string.match(/\S/);
-}
-function findNextFirstChar(firstChars, startIndex, char) {
-  for (var i = startIndex; i < firstChars.length; i += 1) {
-    if (char === firstChars[i]) {
-      return i;
-    }
-  }
-  return -1;
-}
-function noopSelection() {
-  return false;
-}
-var defaultDefaultExpanded = [];
-var defaultDefaultSelected = [];
-
 /**
  *
  * Demos:
  *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
+ * - [Tree View](https://mui.com/x/react-tree-view/)
  *
  * API:
  *
- * - [TreeView API](https://mui.com/material-ui/api/tree-view/)
+ * - [TreeView API](https://mui.com/x/api/tree-view/tree-view/)
  */
 var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
-  var _themeProps$disabledI, _themeProps$disableSe, _themeProps$multiSele, _themeProps$defaultEx, _themeProps$defaultSe;
   var themeProps = useThemeProps({
     props: inProps,
     name: 'MuiTreeView'
   });
-  var props = _extends({}, themeProps, {
-    disabledItemsFocusable: (_themeProps$disabledI = themeProps.disabledItemsFocusable) != null ? _themeProps$disabledI : false,
-    disableSelection: (_themeProps$disableSe = themeProps.disableSelection) != null ? _themeProps$disableSe : false,
-    multiSelect: (_themeProps$multiSele = themeProps.multiSelect) != null ? _themeProps$multiSele : false,
-    defaultExpanded: (_themeProps$defaultEx = themeProps.defaultExpanded) != null ? _themeProps$defaultEx : defaultDefaultExpanded,
-    defaultSelected: (_themeProps$defaultSe = themeProps.defaultSelected) != null ? _themeProps$defaultSe : defaultDefaultSelected
-  });
-  var children = props.children,
-    className = props.className,
-    defaultCollapseIcon = props.defaultCollapseIcon,
-    defaultEndIcon = props.defaultEndIcon,
-    defaultExpanded = props.defaultExpanded,
-    defaultExpandIcon = props.defaultExpandIcon,
-    defaultParentIcon = props.defaultParentIcon,
-    defaultSelected = props.defaultSelected,
-    disabledItemsFocusable = props.disabledItemsFocusable,
-    disableSelection = props.disableSelection,
-    expandedProp = props.expanded,
-    idProp = props.id,
-    multiSelect = props.multiSelect,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onKeyDown = props.onKeyDown,
-    onNodeFocus = props.onNodeFocus,
-    onNodeSelect = props.onNodeSelect,
-    onNodeToggle = props.onNodeToggle,
-    selectedProp = props.selected,
-    other = _objectWithoutProperties(props, _excluded);
-  var theme = useTheme();
-  var isRtl = theme.direction === 'rtl';
-  var classes = useUtilityClasses(props);
-  var treeId = useId(idProp);
-  var treeRef = React.useRef(null);
-  var handleRef = useForkRef(treeRef, ref);
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focusedNodeId = _React$useState2[0],
-    setFocusedNodeId = _React$useState2[1];
-  var nodeMap = React.useRef({});
-  var firstCharMap = React.useRef({});
-  var _useControlled = useControlled({
-      controlled: expandedProp,
-      default: defaultExpanded,
-      name: 'TreeView',
-      state: 'expanded'
-    }),
-    _useControlled2 = _slicedToArray(_useControlled, 2),
-    expanded = _useControlled2[0],
-    setExpandedState = _useControlled2[1];
-  var _useControlled3 = useControlled({
-      controlled: selectedProp,
-      default: defaultSelected,
-      name: 'TreeView',
-      state: 'selected'
-    }),
-    _useControlled4 = _slicedToArray(_useControlled3, 2),
-    selected = _useControlled4[0],
-    setSelectedState = _useControlled4[1];
-
-  /*
-   * Status Helpers
-   */
-  var isExpanded = React.useCallback(function (nodeId) {
-    return Array.isArray(expanded) ? expanded.indexOf(nodeId) !== -1 : false;
-  }, [expanded]);
-  var isExpandable = React.useCallback(function (nodeId) {
-    return nodeMap.current[nodeId] && nodeMap.current[nodeId].expandable;
-  }, []);
-  var isSelected = React.useCallback(function (nodeId) {
-    return Array.isArray(selected) ? selected.indexOf(nodeId) !== -1 : selected === nodeId;
-  }, [selected]);
-  var isDisabled = React.useCallback(function (nodeId) {
-    if (nodeId == null) {
-      return false;
-    }
-    var node = nodeMap.current[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 = nodeMap.current[node.parentId];
-      if (node.disabled) {
-        return true;
-      }
-    }
-    return false;
-  }, []);
-  var isFocused = function isFocused(nodeId) {
-    return focusedNodeId === nodeId;
-  };
-
-  /*
-   * Child Helpers
-   */
-
-  // Using Object.keys -> .map to mimic Object.values we should replace with Object.values() once we stop IE11 support.
-  var getChildrenIds = function getChildrenIds(nodeId) {
-    return Object.keys(nodeMap.current).map(function (key) {
-      return nodeMap.current[key];
-    }).filter(function (node) {
-      return node.parentId === nodeId;
-    }).sort(function (a, b) {
-      return a.index - b.index;
-    }).map(function (child) {
-      return child.id;
-    });
-  };
-  var getNavigableChildrenIds = function getNavigableChildrenIds(nodeId) {
-    var childrenIds = getChildrenIds(nodeId);
-    if (!disabledItemsFocusable) {
-      childrenIds = childrenIds.filter(function (node) {
-        return !isDisabled(node);
-      });
-    }
-    return childrenIds;
-  };
-
-  /*
-   * Node Helpers
-   */
-
-  var getNextNode = function getNextNode(nodeId) {
-    // If expanded get first child
-    if (isExpanded(nodeId) && getNavigableChildrenIds(nodeId).length > 0) {
-      return getNavigableChildrenIds(nodeId)[0];
-    }
-    var node = nodeMap.current[nodeId];
-    while (node != null) {
-      // Try to get next sibling
-      var siblings = getNavigableChildrenIds(node.parentId);
-      var 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 = nodeMap.current[node.parentId];
-    }
-    return null;
-  };
-  var getPreviousNode = function getPreviousNode(nodeId) {
-    var node = nodeMap.current[nodeId];
-    var siblings = getNavigableChildrenIds(node.parentId);
-    var nodeIndex = siblings.indexOf(nodeId);
-    if (nodeIndex === 0) {
-      return node.parentId;
-    }
-    var currentNode = siblings[nodeIndex - 1];
-    while (isExpanded(currentNode) && getNavigableChildrenIds(currentNode).length > 0) {
-      currentNode = getNavigableChildrenIds(currentNode).pop();
-    }
-    return currentNode;
-  };
-  var getLastNode = function getLastNode() {
-    var lastNode = getNavigableChildrenIds(null).pop();
-    while (isExpanded(lastNode)) {
-      lastNode = getNavigableChildrenIds(lastNode).pop();
-    }
-    return lastNode;
-  };
-  var getFirstNode = function getFirstNode() {
-    return getNavigableChildrenIds(null)[0];
-  };
-  var getParent = function getParent(nodeId) {
-    return nodeMap.current[nodeId].parentId;
-  };
-
-  /**
-   * 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
-   */
-  var findOrderInTremauxTree = function findOrderInTremauxTree(nodeAId, nodeBId) {
-    if (nodeAId === nodeBId) {
-      return [nodeAId, nodeBId];
-    }
-    var nodeA = nodeMap.current[nodeAId];
-    var nodeB = nodeMap.current[nodeBId];
-    if (nodeA.parentId === nodeB.id || nodeB.parentId === nodeA.id) {
-      return nodeB.parentId === nodeA.id ? [nodeA.id, nodeB.id] : [nodeB.id, nodeA.id];
-    }
-    var aFamily = [nodeA.id];
-    var bFamily = [nodeB.id];
-    var aAncestor = nodeA.parentId;
-    var bAncestor = nodeB.parentId;
-    var aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
-    var bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
-    var continueA = true;
-    var continueB = true;
-    while (!bAncestorIsCommon && !aAncestorIsCommon) {
-      if (continueA) {
-        aFamily.push(aAncestor);
-        aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
-        continueA = aAncestor !== null;
-        if (!aAncestorIsCommon && continueA) {
-          aAncestor = nodeMap.current[aAncestor].parentId;
-        }
-      }
-      if (continueB && !aAncestorIsCommon) {
-        bFamily.push(bAncestor);
-        bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
-        continueB = bAncestor !== null;
-        if (!bAncestorIsCommon && continueB) {
-          bAncestor = nodeMap.current[bAncestor].parentId;
-        }
-      }
-    }
-    var commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-    var ancestorFamily = getChildrenIds(commonAncestor);
-    var aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
-    var bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
-    return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [nodeAId, nodeBId] : [nodeBId, nodeAId];
-  };
-  var getNodesInRange = function getNodesInRange(nodeAId, nodeBId) {
-    var _findOrderInTremauxTr = findOrderInTremauxTree(nodeAId, nodeBId),
-      _findOrderInTremauxTr2 = _slicedToArray(_findOrderInTremauxTr, 2),
-      first = _findOrderInTremauxTr2[0],
-      last = _findOrderInTremauxTr2[1];
-    var nodes = [first];
-    var current = first;
-    while (current !== last) {
-      current = getNextNode(current);
-      nodes.push(current);
-    }
-    return nodes;
-  };
-
-  /*
-   * Focus Helpers
-   */
-
-  var focus = function focus(event, nodeId) {
-    if (nodeId) {
-      setFocusedNodeId(nodeId);
-      if (onNodeFocus) {
-        onNodeFocus(event, nodeId);
-      }
-    }
-  };
-  var focusNextNode = function focusNextNode(event, nodeId) {
-    return focus(event, getNextNode(nodeId));
-  };
-  var focusPreviousNode = function focusPreviousNode(event, nodeId) {
-    return focus(event, getPreviousNode(nodeId));
-  };
-  var focusFirstNode = function focusFirstNode(event) {
-    return focus(event, getFirstNode());
-  };
-  var focusLastNode = function focusLastNode(event) {
-    return focus(event, getLastNode());
-  };
-  var focusByFirstCharacter = function focusByFirstCharacter(event, nodeId, firstChar) {
-    var start;
-    var index;
-    var lowercaseChar = firstChar.toLowerCase();
-    var firstCharIds = [];
-    var firstChars = [];
-    // This really only works since the ids are strings
-    Object.keys(firstCharMap.current).forEach(function (mapNodeId) {
-      var map = nodeMap.current[mapNodeId];
-      var visible = map.parentId ? isExpanded(map.parentId) : true;
-      var shouldBeSkipped = disabledItemsFocusable ? false : isDisabled(mapNodeId);
-      if (visible && !shouldBeSkipped) {
-        firstCharIds.push(mapNodeId);
-        firstChars.push(firstCharMap.current[mapNodeId]);
-      }
-    });
-
-    // Get start index for search based on position of currentItem
-    start = firstCharIds.indexOf(nodeId) + 1;
-    if (start >= firstCharIds.length) {
-      start = 0;
-    }
-
-    // Check remaining slots in the menu
-    index = findNextFirstChar(firstChars, start, lowercaseChar);
-
-    // If not found in remaining slots, check from beginning
-    if (index === -1) {
-      index = findNextFirstChar(firstChars, 0, lowercaseChar);
-    }
-
-    // If match was found...
-    if (index > -1) {
-      focus(event, firstCharIds[index]);
-    }
-  };
-
-  /*
-   * Expansion Helpers
-   */
-
-  var toggleExpansion = function toggleExpansion(event) {
-    var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : focusedNodeId;
-    if (value == null) {
-      return;
-    }
-    var newExpanded;
-    if (expanded.indexOf(value) !== -1) {
-      newExpanded = expanded.filter(function (id) {
-        return id !== value;
-      });
-    } else {
-      newExpanded = [value].concat(expanded);
-    }
-    if (onNodeToggle) {
-      onNodeToggle(event, newExpanded);
-    }
-    setExpandedState(newExpanded);
-  };
-  var expandAllSiblings = function expandAllSiblings(event, nodeId) {
-    var map = nodeMap.current[nodeId];
-    var siblings = getChildrenIds(map.parentId);
-    var diff = siblings.filter(function (child) {
-      return isExpandable(child) && !isExpanded(child);
-    });
-    var newExpanded = expanded.concat(diff);
-    if (diff.length > 0) {
-      setExpandedState(newExpanded);
-      if (onNodeToggle) {
-        onNodeToggle(event, newExpanded);
-      }
-    }
-  };
-
-  /*
-   * Selection Helpers
-   */
-
-  var lastSelectedNode = React.useRef(null);
-  var lastSelectionWasRange = React.useRef(false);
-  var currentRangeSelection = React.useRef([]);
-  var handleRangeArrowSelect = function handleRangeArrowSelect(event, nodes) {
-    var base = selected.slice();
-    var start = nodes.start,
-      next = nodes.next,
-      current = nodes.current;
-    if (!next || !current) {
-      return;
-    }
-    if (currentRangeSelection.current.indexOf(current) === -1) {
-      currentRangeSelection.current = [];
-    }
-    if (lastSelectionWasRange.current) {
-      if (currentRangeSelection.current.indexOf(next) !== -1) {
-        base = base.filter(function (id) {
-          return id === start || id !== current;
-        });
-        currentRangeSelection.current = currentRangeSelection.current.filter(function (id) {
-          return id === start || id !== current;
-        });
-      } else {
-        base.push(next);
-        currentRangeSelection.current.push(next);
-      }
-    } else {
-      base.push(next);
-      currentRangeSelection.current.push(current, next);
-    }
-    if (onNodeSelect) {
-      onNodeSelect(event, base);
-    }
-    setSelectedState(base);
-  };
-  var handleRangeSelect = function handleRangeSelect(event, nodes) {
-    var base = selected.slice();
-    var start = nodes.start,
-      end = nodes.end;
-    // If last selection was a range selection ignore nodes that were selected.
-    if (lastSelectionWasRange.current) {
-      base = base.filter(function (id) {
-        return currentRangeSelection.current.indexOf(id) === -1;
-      });
-    }
-    var range = getNodesInRange(start, end);
-    range = range.filter(function (node) {
-      return !isDisabled(node);
-    });
-    currentRangeSelection.current = range;
-    var newSelected = base.concat(range);
-    newSelected = newSelected.filter(function (id, i) {
-      return newSelected.indexOf(id) === i;
-    });
-    if (onNodeSelect) {
-      onNodeSelect(event, newSelected);
-    }
-    setSelectedState(newSelected);
-  };
-  var handleMultipleSelect = function handleMultipleSelect(event, nodeId) {
-    if (!Array.isArray(selected)) {
-      return;
-    }
-    var newSelected;
-    if (selected.indexOf(nodeId) !== -1) {
-      newSelected = selected.filter(function (id) {
-        return id !== nodeId;
-      });
-    } else {
-      newSelected = [nodeId].concat(selected);
-    }
-    if (onNodeSelect) {
-      onNodeSelect(event, newSelected);
-    }
-    setSelectedState(newSelected);
-  };
-  var handleSingleSelect = function handleSingleSelect(event, nodeId) {
-    var newSelected = multiSelect ? [nodeId] : nodeId;
-    if (onNodeSelect) {
-      onNodeSelect(event, newSelected);
-    }
-    setSelectedState(newSelected);
-  };
-  var selectNode = function selectNode(event, nodeId) {
-    var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    if (nodeId) {
-      if (multiple) {
-        handleMultipleSelect(event, nodeId);
-      } else {
-        handleSingleSelect(event, nodeId);
-      }
-      lastSelectedNode.current = nodeId;
-      lastSelectionWasRange.current = false;
-      currentRangeSelection.current = [];
-      return true;
-    }
-    return false;
-  };
-  var selectRange = function selectRange(event, nodes) {
-    var stacked = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var _nodes$start = nodes.start,
-      start = _nodes$start === void 0 ? lastSelectedNode.current : _nodes$start,
-      end = nodes.end,
-      current = nodes.current;
-    if (stacked) {
-      handleRangeArrowSelect(event, {
-        start: start,
-        next: end,
-        current: current
-      });
-    } else if (start != null && end != null) {
-      handleRangeSelect(event, {
-        start: start,
-        end: end
-      });
-    }
-    lastSelectionWasRange.current = true;
-  };
-  var rangeSelectToFirst = function rangeSelectToFirst(event, id) {
-    if (!lastSelectedNode.current) {
-      lastSelectedNode.current = id;
-    }
-    var start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
-    selectRange(event, {
-      start: start,
-      end: getFirstNode()
-    });
-  };
-  var rangeSelectToLast = function rangeSelectToLast(event, id) {
-    if (!lastSelectedNode.current) {
-      lastSelectedNode.current = id;
-    }
-    var start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
-    selectRange(event, {
-      start: start,
-      end: getLastNode()
-    });
-  };
-  var selectNextNode = function selectNextNode(event, id) {
-    if (!isDisabled(getNextNode(id))) {
-      selectRange(event, {
-        end: getNextNode(id),
-        current: id
-      }, true);
-    }
-  };
-  var selectPreviousNode = function selectPreviousNode(event, id) {
-    if (!isDisabled(getPreviousNode(id))) {
-      selectRange(event, {
-        end: getPreviousNode(id),
-        current: id
-      }, true);
-    }
-  };
-  var selectAllNodes = function selectAllNodes(event) {
-    selectRange(event, {
-      start: getFirstNode(),
-      end: getLastNode()
-    });
-  };
-
-  /*
-   * Mapping Helpers
-   */
-  var registerNode = React.useCallback(function (node) {
-    var id = node.id,
-      index = node.index,
-      parentId = node.parentId,
-      expandable = node.expandable,
-      idAttribute = node.idAttribute,
-      disabled = node.disabled;
-    nodeMap.current[id] = {
-      id: id,
-      index: index,
-      parentId: parentId,
-      expandable: expandable,
-      idAttribute: idAttribute,
-      disabled: disabled
-    };
-  }, []);
-  var unregisterNode = React.useCallback(function (nodeId) {
-    var newMap = _extends({}, nodeMap.current);
-    delete newMap[nodeId];
-    nodeMap.current = newMap;
-    setFocusedNodeId(function (oldFocusedNodeId) {
-      if (oldFocusedNodeId === nodeId && treeRef.current === ownerDocument(treeRef.current).activeElement) {
-        return getChildrenIds(null)[0];
-      }
-      return oldFocusedNodeId;
-    });
-  }, []);
-  var mapFirstChar = React.useCallback(function (nodeId, firstChar) {
-    firstCharMap.current[nodeId] = firstChar;
-  }, []);
-  var unMapFirstChar = React.useCallback(function (nodeId) {
-    var newMap = _extends({}, firstCharMap.current);
-    delete newMap[nodeId];
-    firstCharMap.current = newMap;
-  }, []);
-
-  /**
-   * Event handlers and Navigation
-   */
-
-  var handleNextArrow = function handleNextArrow(event) {
-    if (focusedNodeId != null && isExpandable(focusedNodeId)) {
-      if (isExpanded(focusedNodeId)) {
-        focusNextNode(event, focusedNodeId);
-      } else if (!isDisabled(focusedNodeId)) {
-        toggleExpansion(event);
-      }
-    }
-    return true;
-  };
-  var handlePreviousArrow = function handlePreviousArrow(event) {
-    if (focusedNodeId == null) {
-      return false;
-    }
-    if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {
-      toggleExpansion(event, focusedNodeId);
-      return true;
-    }
-    var parent = getParent(focusedNodeId);
-    if (parent) {
-      focus(event, parent);
-      return true;
-    }
-    return false;
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    var flag = false;
-    var key = event.key;
-
-    // If the tree is empty there will be no focused node
-    if (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
-      return;
-    }
-    var ctrlPressed = event.ctrlKey || event.metaKey;
-    switch (key) {
-      case ' ':
-        if (!disableSelection && focusedNodeId != null && !isDisabled(focusedNodeId)) {
-          if (multiSelect && event.shiftKey) {
-            selectRange(event, {
-              end: focusedNodeId
-            });
-            flag = true;
-          } else if (multiSelect) {
-            flag = selectNode(event, focusedNodeId, true);
-          } else {
-            flag = selectNode(event, focusedNodeId);
-          }
-        }
-        event.stopPropagation();
-        break;
-      case 'Enter':
-        if (!isDisabled(focusedNodeId)) {
-          if (isExpandable(focusedNodeId)) {
-            toggleExpansion(event);
-            flag = true;
-          } else if (multiSelect) {
-            flag = selectNode(event, focusedNodeId, true);
-          } else {
-            flag = selectNode(event, focusedNodeId);
-          }
-        }
-        event.stopPropagation();
-        break;
-      case 'ArrowDown':
-        if (multiSelect && event.shiftKey && !disableSelection) {
-          selectNextNode(event, focusedNodeId);
-        }
-        focusNextNode(event, focusedNodeId);
-        flag = true;
-        break;
-      case 'ArrowUp':
-        if (multiSelect && event.shiftKey && !disableSelection) {
-          selectPreviousNode(event, focusedNodeId);
-        }
-        focusPreviousNode(event, focusedNodeId);
-        flag = true;
-        break;
-      case 'ArrowRight':
-        if (isRtl) {
-          flag = handlePreviousArrow(event);
-        } else {
-          flag = handleNextArrow(event);
-        }
-        break;
-      case 'ArrowLeft':
-        if (isRtl) {
-          flag = handleNextArrow(event);
-        } else {
-          flag = handlePreviousArrow(event);
-        }
-        break;
-      case 'Home':
-        if (multiSelect && ctrlPressed && event.shiftKey && !disableSelection && !isDisabled(focusedNodeId)) {
-          rangeSelectToFirst(event, focusedNodeId);
-        }
-        focusFirstNode(event);
-        flag = true;
-        break;
-      case 'End':
-        if (multiSelect && ctrlPressed && event.shiftKey && !disableSelection && !isDisabled(focusedNodeId)) {
-          rangeSelectToLast(event, focusedNodeId);
-        }
-        focusLastNode(event);
-        flag = true;
-        break;
-      default:
-        if (key === '*') {
-          expandAllSiblings(event, focusedNodeId);
-          flag = true;
-        } else if (multiSelect && ctrlPressed && key.toLowerCase() === 'a' && !disableSelection) {
-          selectAllNodes(event);
-          flag = true;
-        } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
-          focusByFirstCharacter(event, focusedNodeId, key);
-          flag = true;
-        }
-    }
-    if (flag) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  var handleFocus = function handleFocus(event) {
-    // if the event bubbled (which is React specific) we don't want to steal focus
-    if (event.target === event.currentTarget) {
-      var firstSelected = Array.isArray(selected) ? selected[0] : selected;
-      focus(event, firstSelected || getNavigableChildrenIds(null)[0]);
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  var handleBlur = function handleBlur(event) {
-    setFocusedNodeId(null);
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  var activeDescendant = nodeMap.current[focusedNodeId] ? nodeMap.current[focusedNodeId].idAttribute : null;
-  return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
-    // TODO: fix this lint error
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    value: {
-      icons: {
-        defaultCollapseIcon: defaultCollapseIcon,
-        defaultExpandIcon: defaultExpandIcon,
-        defaultParentIcon: defaultParentIcon,
-        defaultEndIcon: defaultEndIcon
-      },
-      focus: focus,
-      toggleExpansion: toggleExpansion,
-      isExpanded: isExpanded,
-      isExpandable: isExpandable,
-      isFocused: isFocused,
-      isSelected: isSelected,
-      isDisabled: isDisabled,
-      selectNode: disableSelection ? noopSelection : selectNode,
-      selectRange: disableSelection ? noopSelection : selectRange,
-      multiSelect: multiSelect,
+  var ownerState = themeProps;
+  var _ref = themeProps,
+    disabledItemsFocusable = _ref.disabledItemsFocusable,
+    expanded = _ref.expanded,
+    defaultExpanded = _ref.defaultExpanded,
+    onNodeToggle = _ref.onNodeToggle,
+    onNodeFocus = _ref.onNodeFocus,
+    disableSelection = _ref.disableSelection,
+    defaultSelected = _ref.defaultSelected,
+    selected = _ref.selected,
+    multiSelect = _ref.multiSelect,
+    onNodeSelect = _ref.onNodeSelect,
+    id = _ref.id,
+    defaultCollapseIcon = _ref.defaultCollapseIcon,
+    defaultEndIcon = _ref.defaultEndIcon,
+    defaultExpandIcon = _ref.defaultExpandIcon,
+    defaultParentIcon = _ref.defaultParentIcon,
+    children = _ref.children,
+    other = _objectWithoutProperties(_ref, _excluded);
+  var _useTreeView = useTreeView({
       disabledItemsFocusable: disabledItemsFocusable,
-      mapFirstChar: mapFirstChar,
-      unMapFirstChar: unMapFirstChar,
-      registerNode: registerNode,
-      unregisterNode: unregisterNode,
-      treeId: treeId
-    },
-    children: /*#__PURE__*/_jsx(DescendantProvider, {
-      children: /*#__PURE__*/_jsx(TreeViewRoot, _extends({
-        role: "tree",
-        id: treeId,
-        "aria-activedescendant": activeDescendant != null ? activeDescendant : undefined,
-        "aria-multiselectable": multiSelect,
-        className: clsx(classes.root, className),
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        ownerState: props
-      }, other, {
-        ref: handleRef,
-        children: children
-      }))
-    })
+      expanded: expanded,
+      defaultExpanded: defaultExpanded,
+      onNodeToggle: onNodeToggle,
+      onNodeFocus: onNodeFocus,
+      disableSelection: disableSelection,
+      defaultSelected: defaultSelected,
+      selected: selected,
+      multiSelect: multiSelect,
+      onNodeSelect: onNodeSelect,
+      id: id,
+      defaultCollapseIcon: defaultCollapseIcon,
+      defaultEndIcon: defaultEndIcon,
+      defaultExpandIcon: defaultExpandIcon,
+      defaultParentIcon: defaultParentIcon,
+      plugins: DEFAULT_TREE_VIEW_PLUGINS,
+      rootRef: ref
+    }),
+    getRootProps = _useTreeView.getRootProps,
+    contextValue = _useTreeView.contextValue;
+  var classes = useUtilityClasses(themeProps);
+  var rootProps = useSlotProps({
+    elementType: TreeViewRoot,
+    externalSlotProps: {},
+    externalForwardedProps: other,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsx(TreeViewProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(TreeViewRoot, _extends({}, rootProps, {
+      children: children
+    }))
   });
 });
 process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
@@ -830,7 +129,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   defaultEndIcon: PropTypes.node,
   /**
    * Expanded node ids.
-   * Used when the item's expansion are not controlled.
+   * Used when the item's expansion is not controlled.
    * @default []
    */
   defaultExpanded: PropTypes.arrayOf(PropTypes.string),
@@ -848,7 +147,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    * @default []
    */
-  defaultSelected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+  defaultSelected: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
@@ -861,7 +160,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
   disableSelection: PropTypes.bool,
   /**
    * Expanded node ids.
-   * Used when the item's expansion are controlled.
+   * Used when the item's expansion is controlled.
    */
   expanded: PropTypes.arrayOf(PropTypes.string),
   /**
@@ -898,7 +197,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Selected node ids. (Controlled)
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
-  selected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
+  selected: PropTypes.any,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */