@mui/lab 5.0.0-alpha.106 → 5.0.0-alpha.108

package/legacy/TreeView/TreeView.js

@@ -11,7 +11,6 @@ import TreeViewContext from './TreeViewContext';
 import { DescendantProvider } from './descendants';
 import { getTreeViewUtilityClass } from './treeViewClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -19,7 +18,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getTreeViewUtilityClass, classes);
 };
-
 var TreeViewRoot = styled('ul', {
   name: 'MuiTreeView',
   slot: 'Root',
@@ -32,25 +30,20 @@ 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 = [];
 var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
@@ -58,37 +51,34 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     props: inProps,
     name: 'MuiTreeView'
   });
-
   var children = props.children,
-      className = props.className,
-      defaultCollapseIcon = props.defaultCollapseIcon,
-      defaultEndIcon = props.defaultEndIcon,
-      _props$defaultExpande = props.defaultExpanded,
-      defaultExpanded = _props$defaultExpande === void 0 ? defaultDefaultExpanded : _props$defaultExpande,
-      defaultExpandIcon = props.defaultExpandIcon,
-      defaultParentIcon = props.defaultParentIcon,
-      _props$defaultSelecte = props.defaultSelected,
-      defaultSelected = _props$defaultSelecte === void 0 ? defaultDefaultSelected : _props$defaultSelecte,
-      _props$disabledItemsF = props.disabledItemsFocusable,
-      disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
-      _props$disableSelecti = props.disableSelection,
-      disableSelection = _props$disableSelecti === void 0 ? false : _props$disableSelecti,
-      expandedProp = props.expanded,
-      idProp = props.id,
-      _props$multiSelect = props.multiSelect,
-      multiSelect = _props$multiSelect === void 0 ? false : _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, ["children", "className", "defaultCollapseIcon", "defaultEndIcon", "defaultExpanded", "defaultExpandIcon", "defaultParentIcon", "defaultSelected", "disabledItemsFocusable", "disableSelection", "expanded", "id", "multiSelect", "onBlur", "onFocus", "onKeyDown", "onNodeFocus", "onNodeSelect", "onNodeToggle", "selected"]);
-
+    className = props.className,
+    defaultCollapseIcon = props.defaultCollapseIcon,
+    defaultEndIcon = props.defaultEndIcon,
+    _props$defaultExpande = props.defaultExpanded,
+    defaultExpanded = _props$defaultExpande === void 0 ? defaultDefaultExpanded : _props$defaultExpande,
+    defaultExpandIcon = props.defaultExpandIcon,
+    defaultParentIcon = props.defaultParentIcon,
+    _props$defaultSelecte = props.defaultSelected,
+    defaultSelected = _props$defaultSelecte === void 0 ? defaultDefaultSelected : _props$defaultSelecte,
+    _props$disabledItemsF = props.disabledItemsFocusable,
+    disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
+    _props$disableSelecti = props.disableSelection,
+    disableSelection = _props$disableSelecti === void 0 ? false : _props$disableSelecti,
+    expandedProp = props.expanded,
+    idProp = props.id,
+    _props$multiSelect = props.multiSelect,
+    multiSelect = _props$multiSelect === void 0 ? false : _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, ["children", "className", "defaultCollapseIcon", "defaultEndIcon", "defaultExpanded", "defaultExpandIcon", "defaultParentIcon", "defaultSelected", "disabledItemsFocusable", "disableSelection", "expanded", "id", "multiSelect", "onBlur", "onFocus", "onKeyDown", "onNodeFocus", "onNodeSelect", "onNodeToggle", "selected"]);
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
-
   var ownerState = _extends({}, props, {
     defaultExpanded: defaultExpanded,
     defaultSelected: defaultSelected,
@@ -96,43 +86,36 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     disableSelection: disableSelection,
     multiSelect: multiSelect
   });
-
   var classes = useUtilityClasses(ownerState);
   var treeId = useId(idProp);
   var treeRef = React.useRef(null);
   var handleRef = useForkRef(treeRef, ref);
-
   var _React$useState = React.useState(null),
-      focusedNodeId = _React$useState[0],
-      setFocusedNodeId = _React$useState[1];
-
+    focusedNodeId = _React$useState[0],
+    setFocusedNodeId = _React$useState[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];
-
+      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];
+      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 (id) {
     return Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false;
   }, [expanded]);
@@ -143,36 +126,32 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     return Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id;
   }, [selected]);
   var isDisabled = React.useCallback(function (id) {
-    var node = nodeMap.current[id]; // This can be called before the node has been added to the node map.
+    var node = nodeMap.current[id];
 
+    // 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(id) {
     return focusedNodeId === id;
   };
+
   /*
    * Child Helpers
    */
-  // Using Object.keys -> .map to mimic Object.values we should replace with Object.values() once we stop IE11 support.
-
 
+  // Using Object.keys -> .map to mimic Object.values we should replace with Object.values() once we stop IE11 support.
   var getChildrenIds = function getChildrenIds(id) {
     return Object.keys(nodeMap.current).map(function (key) {
       return nodeMap.current[key];
@@ -184,82 +163,66 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
       return child.id;
     });
   };
-
   var getNavigableChildrenIds = function getNavigableChildrenIds(id) {
     var childrenIds = getChildrenIds(id);
-
     if (!disabledItemsFocusable) {
       childrenIds = childrenIds.filter(function (node) {
         return !isDisabled(node);
       });
     }
-
     return childrenIds;
   };
+
   /*
    * Node Helpers
    */
 
-
   var getNextNode = function getNextNode(id) {
     // If expanded get first child
     if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {
       return getNavigableChildrenIds(id)[0];
     }
-
     var node = nodeMap.current[id];
-
     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.
-
+      }
 
+      // 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(id) {
     var node = nodeMap.current[id];
     var siblings = getNavigableChildrenIds(node.parentId);
     var nodeIndex = siblings.indexOf(id);
-
     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(id) {
     return nodeMap.current[id].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.
@@ -274,20 +237,15 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
    * 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;
@@ -296,129 +254,113 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     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(nodeA, nodeB) {
     var _findOrderInTremauxTr = findOrderInTremauxTree(nodeA, nodeB),
-        _findOrderInTremauxTr2 = _slicedToArray(_findOrderInTremauxTr, 2),
-        first = _findOrderInTremauxTr2[0],
-        last = _findOrderInTremauxTr2[1];
-
+      _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, id) {
     if (id) {
       setFocusedNodeId(id);
-
       if (onNodeFocus) {
         onNodeFocus(event, id);
       }
     }
   };
-
   var focusNextNode = function focusNextNode(event, id) {
     return focus(event, getNextNode(id));
   };
-
   var focusPreviousNode = function focusPreviousNode(event, id) {
     return focus(event, getPreviousNode(id));
   };
-
   var focusFirstNode = function focusFirstNode(event) {
     return focus(event, getFirstNode());
   };
-
   var focusLastNode = function focusLastNode(event) {
     return focus(event, getLastNode());
   };
-
   var focusByFirstCharacter = function focusByFirstCharacter(event, id, char) {
     var start;
     var index;
     var lowercaseChar = char.toLowerCase();
     var firstCharIds = [];
-    var firstChars = []; // This really only works since the ids are strings
-
+    var firstChars = [];
+    // This really only works since the ids are strings
     Object.keys(firstCharMap.current).forEach(function (nodeId) {
       var firstChar = firstCharMap.current[nodeId];
       var map = nodeMap.current[nodeId];
       var visible = map.parentId ? isExpanded(map.parentId) : true;
       var shouldBeSkipped = disabledItemsFocusable ? false : isDisabled(nodeId);
-
       if (visible && !shouldBeSkipped) {
         firstCharIds.push(nodeId);
         firstChars.push(firstChar);
       }
-    }); // Get start index for search based on position of currentItem
+    });
 
+    // Get start index for search based on position of currentItem
     start = firstCharIds.indexOf(id) + 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
+    // 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 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;
     var newExpanded;
-
     if (expanded.indexOf(value) !== -1) {
       newExpanded = expanded.filter(function (id) {
         return id !== value;
@@ -426,14 +368,11 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     } else {
       newExpanded = [value].concat(expanded);
     }
-
     if (onNodeToggle) {
       onNodeToggle(event, newExpanded);
     }
-
     setExpandedState(newExpanded);
   };
-
   var expandAllSiblings = function expandAllSiblings(event, id) {
     var map = nodeMap.current[id];
     var siblings = getChildrenIds(map.parentId);
@@ -441,38 +380,32 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
       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;
-
+      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) {
@@ -489,25 +422,20 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
       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.
-
+      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);
@@ -517,17 +445,13 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     newSelected = newSelected.filter(function (id, i) {
       return newSelected.indexOf(id) === i;
     });
-
     if (onNodeSelect) {
       onNodeSelect(event, newSelected);
     }
-
     setSelectedState(newSelected);
   };
-
   var handleMultipleSelect = function handleMultipleSelect(event, value) {
     var newSelected;
-
     if (selected.indexOf(value) !== -1) {
       newSelected = selected.filter(function (id) {
         return id !== value;
@@ -535,50 +459,39 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     } else {
       newSelected = [value].concat(selected);
     }
-
     if (onNodeSelect) {
       onNodeSelect(event, newSelected);
     }
-
     setSelectedState(newSelected);
   };
-
   var handleSingleSelect = function handleSingleSelect(event, value) {
     var newSelected = multiSelect ? [value] : value;
-
     if (onNodeSelect) {
       onNodeSelect(event, newSelected);
     }
-
     setSelectedState(newSelected);
   };
-
   var selectNode = function selectNode(event, id) {
     var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
     if (id) {
       if (multiple) {
         handleMultipleSelect(event, id);
       } else {
         handleSingleSelect(event, id);
       }
-
       lastSelectedNode.current = id;
       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;
-
+      start = _nodes$start === void 0 ? lastSelectedNode.current : _nodes$start,
+      end = nodes.end,
+      current = nodes.current;
     if (stacked) {
       handleRangeArrowSelect(event, {
         start: start,
@@ -591,34 +504,28 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
         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, {
@@ -627,7 +534,6 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
       }, true);
     }
   };
-
   var selectPreviousNode = function selectPreviousNode(event, id) {
     if (!isDisabled(getPreviousNode(id))) {
       selectRange(event, {
@@ -636,25 +542,23 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
       }, 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;
+      index = node.index,
+      parentId = node.parentId,
+      expandable = node.expandable,
+      idAttribute = node.idAttribute,
+      disabled = node.disabled;
     nodeMap.current[id] = {
       id: id,
       index: index,
@@ -666,14 +570,12 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
   }, []);
   var unregisterNode = React.useCallback(function (id) {
     var newMap = _extends({}, nodeMap.current);
-
     delete newMap[id];
     nodeMap.current = newMap;
     setFocusedNodeId(function (oldFocusedNodeId) {
       if (oldFocusedNodeId === id && treeRef.current === ownerDocument(treeRef.current).activeElement) {
         return getChildrenIds(null)[0];
       }
-
       return oldFocusedNodeId;
     });
   }, []);
@@ -682,10 +584,10 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
   }, []);
   var unMapFirstChar = React.useCallback(function (id) {
     var newMap = _extends({}, firstCharMap.current);
-
     delete newMap[id];
     firstCharMap.current = newMap;
   }, []);
+
   /**
    * Event handlers and Navigation
    */
@@ -698,36 +600,29 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
         toggleExpansion(event);
       }
     }
-
     return true;
   };
-
   var handlePreviousArrow = function handlePreviousArrow(event) {
     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
+    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 && !isDisabled(focusedNodeId)) {
@@ -742,10 +637,8 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
             flag = selectNode(event, focusedNodeId);
           }
         }
-
         event.stopPropagation();
         break;
-
       case 'Enter':
         if (!isDisabled(focusedNodeId)) {
           if (isExpandable(focusedNodeId)) {
@@ -757,64 +650,50 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
             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);
@@ -826,39 +705,31 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
           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 lint error:
@@ -906,108 +777,88 @@ var TreeView = /*#__PURE__*/React.forwardRef(function TreeView(inProps, ref) {
     })
   });
 });
-process.env.NODE_ENV !== "production" ? TreeView.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? TreeView.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The default icon used to collapse the node.
    */
   defaultCollapseIcon: PropTypes.node,
-
   /**
    * The default icon displayed next to a end node. This is applied to all
    * tree nodes and can be overridden by the TreeItem `icon` prop.
    */
   defaultEndIcon: PropTypes.node,
-
   /**
    * Expanded node ids. (Uncontrolled)
    * @default []
    */
   defaultExpanded: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * The default icon used to expand the node.
    */
   defaultExpandIcon: PropTypes.node,
-
   /**
    * The default icon displayed next to a parent node. This is applied to all
    * parent nodes and can be overridden by the TreeItem `icon` prop.
    */
   defaultParentIcon: PropTypes.node,
-
   /**
    * Selected node ids. (Uncontrolled)
    * 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]),
-
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
    */
   disabledItemsFocusable: PropTypes.bool,
-
   /**
    * If `true` selection is disabled.
    * @default false
    */
   disableSelection: PropTypes.bool,
-
   /**
    * Expanded node ids. (Controlled)
    */
   expanded: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * 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: PropTypes.string,
-
   /**
    * If true `ctrl` and `shift` will trigger multiselect.
    * @default false
    */
   multiSelect: PropTypes.bool,
-
   /**
    * @ignore
    */
   onBlur: PropTypes.func,
-
   /**
    * @ignore
    */
   onFocus: PropTypes.func,
-
   /**
    * @ignore
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Callback fired when tree items are focused.
    *
@@ -1015,7 +866,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes
    * @param {string} value of the focused node.
    */
   onNodeFocus: PropTypes.func,
-
   /**
    * Callback fired when tree items are selected/unselected.
    *
@@ -1024,7 +874,6 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes
    * this is an array of strings; when false (default) a string.
    */
   onNodeSelect: PropTypes.func,
-
   /**
    * Callback fired when tree items are expanded/collapsed.
    *
@@ -1032,13 +881,11 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes
    * @param {array} nodeIds The ids of the expanded nodes.
    */
   onNodeToggle: PropTypes.func,
-
   /**
    * 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]),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */