@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/legacy/VerticalNavigation/TreeView/TreeView.js

@@ -2,11 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "className", "classes", "mode", "collapsible", "expanded", "defaultExpanded", "onToggle", "selectable", "multiSelect", "selected", "defaultSelected", "onChange", "disabledItemsFocusable", "onFocus", "onBlur", "onKeyDown", "children"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.match.js";
 import "core-js/modules/es.array.map.js";
@@ -29,80 +26,70 @@ import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContexts
 import { DescendantProvider } from "./descendants";
 import styles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 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 TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var idProp = props.id,
-      className = props.className,
-      classes = props.classes,
-      _props$mode = props.mode,
-      mode = _props$mode === void 0 ? "treeview" : _props$mode,
-      _props$collapsible = props.collapsible,
-      collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
-      expandedProp = props.expanded,
-      _props$defaultExpande = props.defaultExpanded,
-      defaultExpanded = _props$defaultExpande === void 0 ? [] : _props$defaultExpande,
-      onToggle = props.onToggle,
-      _props$selectable = props.selectable,
-      selectable = _props$selectable === void 0 ? false : _props$selectable,
-      _props$multiSelect = props.multiSelect,
-      multiSelectProp = _props$multiSelect === void 0 ? false : _props$multiSelect,
-      selectedProp = props.selected,
-      _props$defaultSelecte = props.defaultSelected,
-      defaultSelected = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
-      onChange = props.onChange,
-      _props$disabledItemsF = props.disabledItemsFocusable,
-      disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      onKeyDown = props.onKeyDown,
-      children = props.children,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    classes = props.classes,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? "treeview" : _props$mode,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    expandedProp = props.expanded,
+    _props$defaultExpande = props.defaultExpanded,
+    defaultExpanded = _props$defaultExpande === void 0 ? [] : _props$defaultExpande,
+    onToggle = props.onToggle,
+    _props$selectable = props.selectable,
+    selectable = _props$selectable === void 0 ? false : _props$selectable,
+    _props$multiSelect = props.multiSelect,
+    multiSelectProp = _props$multiSelect === void 0 ? false : _props$multiSelect,
+    selectedProp = props.selected,
+    _props$defaultSelecte = props.defaultSelected,
+    defaultSelected = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
+    onChange = props.onChange,
+    _props$disabledItemsF = props.disabledItemsFocusable,
+    disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onKeyDown = props.onKeyDown,
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
   var treeviewMode = mode === "treeview";
   var multiSelect = selectable && multiSelectProp;
   var treeId = useUniqueId(idProp, "hvtreeview");
   var treeRef = useRef(null);
   var handleRef = useForkRef(treeRef, ref);
-
   var _useControlled = useControlled(expandedProp, defaultExpanded),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      expanded = _useControlled2[0],
-      setExpandedState = _useControlled2[1];
-
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    expanded = _useControlled2[0],
+    setExpandedState = _useControlled2[1];
   var _useControlled3 = useControlled(selectedProp, defaultSelected),
-      _useControlled4 = _slicedToArray(_useControlled3, 2),
-      selected = _useControlled4[0],
-      setSelectedState = _useControlled4[1];
-
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    selected = _useControlled4[0],
+    setSelectedState = _useControlled4[1];
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      focusedNodeId = _useState2[0],
-      setFocusedNodeId = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedNodeId = _useState2[0],
+    setFocusedNodeId = _useState2[1];
   var nodeMap = useRef({});
   var firstCharMap = useRef({});
+
   /*
    * Status Helpers
    */
-
   var isExpanded = useCallback(function (id) {
     return !collapsible || (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false);
   }, [collapsible, expanded]);
@@ -116,33 +103,30 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return selectable && nodeMap.current[id] && nodeMap.current[id].selectable;
   }, [selectable]);
   var isDisabled = 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 = useCallback(function (id) {
     return focusedNodeId === id;
   }, [focusedNodeId]);
+
   /*
    * Child Helpers
    */
-
   var getChildrenIds = function getChildrenIds(id) {
     return Object.keys(nodeMap.current).map(function (key) {
       return nodeMap.current[key];
@@ -154,81 +138,65 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return child.id;
     });
   };
-
   var getNavigableChildrenIds = useCallback(function (id) {
     var childrenIds = getChildrenIds(id);
-
     if (!disabledItemsFocusable) {
       childrenIds = childrenIds.filter(function (node) {
         return !isDisabled(node);
       });
     }
-
     return childrenIds;
   }, [disabledItemsFocusable, isDisabled]);
+
   /*
    * Node Helpers
    */
-
   var getNextNode = useCallback(function (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;
   }, [getNavigableChildrenIds, isExpanded]);
-
   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.
@@ -243,20 +211,15 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, 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 = useCallback(function (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;
@@ -265,29 +228,24 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, 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];
@@ -296,98 +254,86 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, []);
   var getNodesInRange = useCallback(function (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;
   }, [findOrderInTremauxTree, getNextNode]);
+
   /*
    * Focus Helpers
    */
-
   var focus = function focus(event, id) {
     if (id) {
       var _nodeMap$current$id;
-
       setFocusedNodeId(id);
-
       if ((_nodeMap$current$id = nodeMap.current[id]) !== null && _nodeMap$current$id !== void 0 && _nodeMap$current$id.onFocus) {
         nodeMap.current[id].onFocus(event);
       }
     }
   };
-
   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 = useCallback(function (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;
@@ -395,14 +341,11 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       newExpanded = [value].concat(expanded);
     }
-
     if (onToggle) {
       onToggle(event, newExpanded);
     }
-
     setExpandedState(newExpanded);
   }, [expanded, focusedNodeId, onToggle, setExpandedState]);
-
   var expandAllSiblings = function expandAllSiblings(event, id) {
     var map = nodeMap.current[id];
     var siblings = getChildrenIds(map.parentId);
@@ -410,37 +353,31 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return isExpandable(child) && !isExpanded(child);
     });
     var newExpanded = expanded.concat(diff);
-
     if (diff.length > 0) {
       setExpandedState(newExpanded);
-
       if (onToggle) {
         onToggle(event, newExpanded);
       }
     }
   };
+
   /*
    * Selection Helpers
    */
-
-
   var lastSelectedNode = useRef(null);
   var lastSelectionWasRange = useRef(false);
   var currentRangeSelection = useRef([]);
   var handleRangeArrowSelect = useCallback(function (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) {
@@ -457,28 +394,24 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       base.push(next);
       currentRangeSelection.current.push(current, next);
     }
-
     if (onChange) {
       onChange(event, base, base.map(function (id) {
         var _nodeMap$current$id2;
-
         return (_nodeMap$current$id2 = nodeMap.current[id]) === null || _nodeMap$current$id2 === void 0 ? void 0 : _nodeMap$current$id2.payload;
       }));
     }
-
     setSelectedState(base);
   }, [onChange, selected, setSelectedState]);
   var handleRangeSelect = useCallback(function (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);
@@ -488,20 +421,16 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     newSelected = newSelected.filter(function (id, i) {
       return newSelected.indexOf(id) === i;
     });
-
     if (onChange) {
       onChange(event, newSelected, newSelected.map(function (id) {
         var _nodeMap$current$id3;
-
         return (_nodeMap$current$id3 = nodeMap.current[id]) === null || _nodeMap$current$id3 === void 0 ? void 0 : _nodeMap$current$id3.payload;
       }));
     }
-
     setSelectedState(newSelected);
   }, [getNodesInRange, isDisabled, onChange, selected, setSelectedState]);
   var handleMultipleSelect = useCallback(function (event, value) {
     var newSelected;
-
     if (selected.indexOf(value) !== -1) {
       newSelected = selected.filter(function (id) {
         return id !== value;
@@ -509,54 +438,44 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       newSelected = [value].concat(selected);
     }
-
     if (onChange) {
       onChange(event, newSelected, newSelected.map(function (id) {
         var _nodeMap$current$id4;
-
         return (_nodeMap$current$id4 = nodeMap.current[id]) === null || _nodeMap$current$id4 === void 0 ? void 0 : _nodeMap$current$id4.payload;
       }));
     }
-
     setSelectedState(newSelected);
   }, [onChange, selected, setSelectedState]);
   var handleSingleSelect = useCallback(function (event, value) {
     var newSelected = multiSelect ? [value] : value;
-
     if (onChange) {
       var _nodeMap$current$newS;
-
       var nodeValue = (_nodeMap$current$newS = nodeMap.current[newSelected]) === null || _nodeMap$current$newS === void 0 ? void 0 : _nodeMap$current$newS.payload;
       onChange(event, newSelected, multiSelect ? [nodeValue] : nodeValue);
     }
-
     setSelectedState(newSelected);
   }, [multiSelect, onChange, setSelectedState]);
   var selectNode = useCallback(function (event, id) {
     var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
     if (id && isSelectable(id)) {
       if (multiple) {
         handleMultipleSelect(event, id);
       } else {
         handleSingleSelect(event, id);
       }
-
       lastSelectedNode.current = id;
       lastSelectionWasRange.current = false;
       currentRangeSelection.current = [];
       return true;
     }
-
     return false;
   }, [handleMultipleSelect, handleSingleSelect, isSelectable]);
   var selectRange = useCallback(function (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,
@@ -569,34 +488,28 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
         end: end
       });
     }
-
     lastSelectionWasRange.current = true;
   }, [handleRangeArrowSelect, handleRangeSelect]);
-
   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, {
@@ -605,7 +518,6 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, true);
     }
   };
-
   var selectPreviousNode = function selectPreviousNode(event, id) {
     if (!isDisabled(getPreviousNode(id))) {
       selectRange(event, {
@@ -614,28 +526,26 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, true);
     }
   };
-
   var selectAllNodes = function selectAllNodes(event) {
     selectRange(event, {
       start: getFirstNode(),
       end: getLastNode()
     });
   };
+
   /*
    * Mapping Helpers
    */
-
-
   var registerNode = useCallback(function (node) {
     var id = node.id,
-        index = node.index,
-        parentId = node.parentId,
-        expandable = node.expandable,
-        idAttribute = node.idAttribute,
-        disabled = node.disabled,
-        nodeSelectable = node.selectable,
-        nodeOnFocus = node.onFocus,
-        payload = node.payload;
+      index = node.index,
+      parentId = node.parentId,
+      expandable = node.expandable,
+      idAttribute = node.idAttribute,
+      disabled = node.disabled,
+      nodeSelectable = node.selectable,
+      nodeOnFocus = node.onFocus,
+      payload = node.payload;
     nodeMap.current[id] = {
       id: id,
       index: index,
@@ -650,14 +560,12 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, []);
   var unregisterNode = useCallback(function (id) {
     var newMap = _objectSpread({}, nodeMap.current);
-
     delete newMap[id];
     nodeMap.current = newMap;
     setFocusedNodeId(function (oldFocusedNodeId) {
       if (oldFocusedNodeId === id && treeRef.current === (treeRef.current.ownerDocument || document).activeElement) {
         return getChildrenIds(null)[0];
       }
-
       return oldFocusedNodeId;
     });
   }, []);
@@ -666,14 +574,13 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, []);
   var unMapFirstChar = useCallback(function (id) {
     var newMap = _objectSpread({}, firstCharMap.current);
-
     delete newMap[id];
     firstCharMap.current = newMap;
   }, []);
+
   /**
    * Event handlers and Navigation
    */
-
   var handleNextArrow = function handleNextArrow(event) {
     if (isExpandable(focusedNodeId)) {
       if (isExpanded(focusedNodeId)) {
@@ -682,36 +589,29 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, 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 (isSelectable(focusedNodeId) && !isDisabled(focusedNodeId)) {
@@ -726,10 +626,8 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
             flag = selectNode(event, focusedNodeId);
           }
         }
-
         event.stopPropagation();
         break;
-
       case "Enter":
         if (!isDisabled(focusedNodeId)) {
           if (isExpandable(focusedNodeId)) {
@@ -748,54 +646,42 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
             }
           }
         }
-
         event.stopPropagation();
         break;
-
       case "ArrowDown":
         if (multiSelect && event.shiftKey) {
           selectNextNode(event, focusedNodeId);
         }
-
         focusNextNode(event, focusedNodeId);
         flag = true;
         break;
-
       case "ArrowUp":
         if (multiSelect && event.shiftKey) {
           selectPreviousNode(event, focusedNodeId);
         }
-
         focusPreviousNode(event, focusedNodeId);
         flag = true;
         break;
-
       case "ArrowRight":
         flag = handleNextArrow(event);
         break;
-
       case "ArrowLeft":
         flag = handlePreviousArrow(event);
         break;
-
       case "Home":
         if (multiSelect && ctrlPressed && event.shiftKey && !isDisabled(focusedNodeId)) {
           rangeSelectToFirst(event, focusedNodeId);
         }
-
         focusFirstNode(event);
         flag = true;
         break;
-
       case "End":
         if (multiSelect && ctrlPressed && event.shiftKey && !isDisabled(focusedNodeId)) {
           rangeSelectToLast(event, focusedNodeId);
         }
-
         focusLastNode(event);
         flag = true;
         break;
-
       default:
         if (key === "*") {
           expandAllSiblings(event, focusedNodeId);
@@ -807,39 +693,31 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, 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;
   var treeControlContext = useMemo(function () {
     return {
@@ -896,12 +774,10 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Id to be applied to the root node.
    */
   id: PropTypes.string,
-
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * A Jss Object used to override or extend the styles applied to the Radio button.
    */
@@ -911,31 +787,26 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
      */
     root: PropTypes.string
   }).isRequired,
-
   /**
    * Modus operandi (role) of the widget instance.
    */
   mode: PropTypes.oneOf(["treeview", "navigation"]),
-
   /**
    * Enables selection.
    * @default false
    */
   selectable: PropTypes.bool,
-
   /**
    * Enables the simultaneous selection of multiple items.
    * @default false
    */
   multiSelect: PropTypes.bool,
-
   /**
    * The selected nodes' ids.
    *
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
-
   /**
    * When uncontrolled, defines the initial selected nodes' ids.
    *
@@ -943,12 +814,10 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * @default []
    */
   defaultSelected: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),
-
   /**
    * Can non-leaf nodes be collapsed / expanded.
    */
   collapsible: PropTypes.bool,
-
   /**
    * Callback fired when a tree item is selected.
    *
@@ -956,18 +825,15 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * @param {string} nodeId The id of the selected node.
    */
   onChange: PropTypes.func,
-
   /**
    * Expanded nodes' ids.
    */
   expanded: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * When uncontrolled, defines the initial expanded nodes' ids.
    * @default []
    */
   defaultExpanded: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Callback fired when tree items are expanded/collapsed.
    *
@@ -975,28 +841,23 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * @param {array} nodeIds The ids of the expanded nodes (old and new).
    */
   onToggle: PropTypes.func,
-
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
    */
   disabledItemsFocusable: PropTypes.bool,
-
   /**
    * @ignore
    */
   onFocus: PropTypes.func,
-
   /**
    * @ignore
    */
   onBlur: PropTypes.func,
-
   /**
    * @ignore
    */
   onKeyDown: PropTypes.func,
-
   /**
    * The content of the component.
    */