@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/modern/VerticalNavigation/TreeView/TreeView.js

@@ -1,12 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _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/web.dom-collections.iterator.js";
 import React, { useMemo, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
@@ -16,48 +12,42 @@ 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 (let i = startIndex; i < firstChars.length; i += 1) {
     if (char === firstChars[i]) {
       return i;
     }
   }
-
   return -1;
 }
-
 function noopSelection() {
   return false;
 }
-
 const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    id: idProp,
-    className,
-    classes,
-    mode = "treeview",
-    collapsible = false,
-    expanded: expandedProp,
-    defaultExpanded = [],
-    onToggle,
-    selectable = false,
-    multiSelect: multiSelectProp = false,
-    selected: selectedProp,
-    defaultSelected = [],
-    onChange,
-    disabledItemsFocusable = false,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    children
-  } = props,
-        others = _objectWithoutProperties(props, _excluded);
-
+      id: idProp,
+      className,
+      classes,
+      mode = "treeview",
+      collapsible = false,
+      expanded: expandedProp,
+      defaultExpanded = [],
+      onToggle,
+      selectable = false,
+      multiSelect: multiSelectProp = false,
+      selected: selectedProp,
+      defaultSelected = [],
+      onChange,
+      disabledItemsFocusable = false,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      children
+    } = props,
+    others = _objectWithoutProperties(props, _excluded);
   const treeviewMode = mode === "treeview";
   const multiSelect = selectable && multiSelectProp;
   const treeId = useUniqueId(idProp, "hvtreeview");
@@ -68,112 +58,93 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [focusedNodeId, setFocusedNodeId] = useState(null);
   const nodeMap = useRef({});
   const firstCharMap = useRef({});
+
   /*
    * Status Helpers
    */
-
   const isExpanded = useCallback(id => !collapsible || (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false), [collapsible, expanded]);
   const isExpandable = useCallback(id => collapsible && nodeMap.current[id] && nodeMap.current[id].expandable, [collapsible]);
   const isSelected = useCallback(id => selectable && (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id), [selectable, selected]);
   const isSelectable = useCallback(id => selectable && nodeMap.current[id] && nodeMap.current[id].selectable, [selectable]);
   const isDisabled = useCallback(id => {
-    let node = nodeMap.current[id]; // This can be called before the node has been added to the node map.
+    let 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;
   }, []);
   const isFocused = useCallback(id => focusedNodeId === id, [focusedNodeId]);
+
   /*
    * Child Helpers
    */
-
   const getChildrenIds = id => Object.keys(nodeMap.current).map(key => {
     return nodeMap.current[key];
   }).filter(node => node.parentId === id).sort((a, b) => a.index - b.index).map(child => child.id);
-
   const getNavigableChildrenIds = useCallback(id => {
     let childrenIds = getChildrenIds(id);
-
     if (!disabledItemsFocusable) {
       childrenIds = childrenIds.filter(node => !isDisabled(node));
     }
-
     return childrenIds;
   }, [disabledItemsFocusable, isDisabled]);
+
   /*
    * Node Helpers
    */
-
   const getNextNode = useCallback(id => {
     // If expanded get first child
     if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {
       return getNavigableChildrenIds(id)[0];
     }
-
     let node = nodeMap.current[id];
-
     while (node != null) {
       // Try to get next sibling
       const siblings = getNavigableChildrenIds(node.parentId);
       const nextSibling = siblings[siblings.indexOf(node.id) + 1];
-
       if (nextSibling) {
         return nextSibling;
-      } // If the sibling does not exist, go up a level to the parent and try again.
-
+      }
 
+      // 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]);
-
   const getPreviousNode = id => {
     const node = nodeMap.current[id];
     const siblings = getNavigableChildrenIds(node.parentId);
     const nodeIndex = siblings.indexOf(id);
-
     if (nodeIndex === 0) {
       return node.parentId;
     }
-
     let currentNode = siblings[nodeIndex - 1];
-
     while (isExpanded(currentNode) && getNavigableChildrenIds(currentNode).length > 0) {
       currentNode = getNavigableChildrenIds(currentNode).pop();
     }
-
     return currentNode;
   };
-
   const getLastNode = () => {
     let lastNode = getNavigableChildrenIds(null).pop();
-
     while (isExpanded(lastNode)) {
       lastNode = getNavigableChildrenIds(lastNode).pop();
     }
-
     return lastNode;
   };
-
   const getFirstNode = () => getNavigableChildrenIds(null)[0];
-
   const getParent = id => 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.
@@ -188,20 +159,15 @@ const TreeView = /*#__PURE__*/React.forwardRef((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
    */
-
-
   const findOrderInTremauxTree = useCallback((nodeAId, nodeBId) => {
     if (nodeAId === nodeBId) {
       return [nodeAId, nodeBId];
     }
-
     const nodeA = nodeMap.current[nodeAId];
     const 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];
     }
-
     const aFamily = [nodeA.id];
     const bFamily = [nodeB.id];
     let aAncestor = nodeA.parentId;
@@ -210,29 +176,24 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
     let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
     let continueA = true;
     let continueB = true;
-
     while (!bAncestorIsCommon && !aAncestorIsCommon) {
       if (continueA) {
         aFamily.push(aAncestor);
         aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
         continueA = aAncestor !== null;
-
         if (!aAncestorIsCommon && continueA) {
           aAncestor = 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;
         }
       }
     }
-
     const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
     const ancestorFamily = getChildrenIds(commonAncestor);
     const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
@@ -243,115 +204,98 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
     const [first, last] = findOrderInTremauxTree(nodeA, nodeB);
     const nodes = [first];
     let current = first;
-
     while (current !== last) {
       current = getNextNode(current);
       nodes.push(current);
     }
-
     return nodes;
   }, [findOrderInTremauxTree, getNextNode]);
+
   /*
    * Focus Helpers
    */
-
   const 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);
       }
     }
   };
-
   const focusNextNode = (event, id) => focus(event, getNextNode(id));
-
   const focusPreviousNode = (event, id) => focus(event, getPreviousNode(id));
-
   const focusFirstNode = event => focus(event, getFirstNode());
-
   const focusLastNode = event => focus(event, getLastNode());
-
   const focusByFirstCharacter = (event, id, char) => {
     let start;
     let index;
     const lowercaseChar = char.toLowerCase();
     const firstCharIds = [];
-    const firstChars = []; // This really only works since the ids are strings
-
+    const firstChars = [];
+    // This really only works since the ids are strings
     Object.keys(firstCharMap.current).forEach(nodeId => {
       const firstChar = firstCharMap.current[nodeId];
       const map = nodeMap.current[nodeId];
       const visible = map.parentId ? isExpanded(map.parentId) : true;
       const 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
    */
-
-
   const toggleExpansion = useCallback((event, value = focusedNodeId) => {
     let newExpanded;
-
     if (expanded.indexOf(value) !== -1) {
       newExpanded = expanded.filter(id => id !== value);
     } else {
       newExpanded = [value].concat(expanded);
     }
-
     if (onToggle) {
       onToggle(event, newExpanded);
     }
-
     setExpandedState(newExpanded);
   }, [expanded, focusedNodeId, onToggle, setExpandedState]);
-
   const expandAllSiblings = (event, id) => {
     const map = nodeMap.current[id];
     const siblings = getChildrenIds(map.parentId);
     const diff = siblings.filter(child => isExpandable(child) && !isExpanded(child));
     const newExpanded = expanded.concat(diff);
-
     if (diff.length > 0) {
       setExpandedState(newExpanded);
-
       if (onToggle) {
         onToggle(event, newExpanded);
       }
     }
   };
+
   /*
    * Selection Helpers
    */
-
-
   const lastSelectedNode = useRef(null);
   const lastSelectionWasRange = useRef(false);
   const currentRangeSelection = useRef([]);
@@ -362,15 +306,12 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
       next,
       current
     } = nodes;
-
     if (!next || !current) {
       return;
     }
-
     if (currentRangeSelection.current.indexOf(current) === -1) {
       currentRangeSelection.current = [];
     }
-
     if (lastSelectionWasRange.current) {
       if (currentRangeSelection.current.indexOf(next) !== -1) {
         base = base.filter(id => id === start || id !== current);
@@ -383,15 +324,12 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
       base.push(next);
       currentRangeSelection.current.push(current, next);
     }
-
     if (onChange) {
       onChange(event, base, base.map(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]);
   const handleRangeSelect = useCallback((event, nodes) => {
@@ -399,57 +337,46 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
     const {
       start,
       end
-    } = nodes; // If last selection was a range selection ignore nodes that were selected.
-
+    } = nodes;
+    // If last selection was a range selection ignore nodes that were selected.
     if (lastSelectionWasRange.current) {
       base = base.filter(id => currentRangeSelection.current.indexOf(id) === -1);
     }
-
     let range = getNodesInRange(start, end);
     range = range.filter(node => !isDisabled(node));
     currentRangeSelection.current = range;
     let newSelected = base.concat(range);
     newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
-
     if (onChange) {
       onChange(event, newSelected, newSelected.map(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]);
   const handleMultipleSelect = useCallback((event, value) => {
     let newSelected;
-
     if (selected.indexOf(value) !== -1) {
       newSelected = selected.filter(id => id !== value);
     } else {
       newSelected = [value].concat(selected);
     }
-
     if (onChange) {
       onChange(event, newSelected, newSelected.map(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]);
   const handleSingleSelect = useCallback((event, value) => {
     const newSelected = multiSelect ? [value] : value;
-
     if (onChange) {
       var _nodeMap$current$newS;
-
       const 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]);
   const selectNode = useCallback((event, id, multiple = false) => {
@@ -459,13 +386,11 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
       } else {
         handleSingleSelect(event, id);
       }
-
       lastSelectedNode.current = id;
       lastSelectionWasRange.current = false;
       currentRangeSelection.current = [];
       return true;
     }
-
     return false;
   }, [handleMultipleSelect, handleSingleSelect, isSelectable]);
   const selectRange = useCallback((event, nodes, stacked = false) => {
@@ -474,7 +399,6 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
       end,
       current
     } = nodes;
-
     if (stacked) {
       handleRangeArrowSelect(event, {
         start,
@@ -487,34 +411,28 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
         end
       });
     }
-
     lastSelectionWasRange.current = true;
   }, [handleRangeArrowSelect, handleRangeSelect]);
-
   const rangeSelectToFirst = (event, id) => {
     if (!lastSelectedNode.current) {
       lastSelectedNode.current = id;
     }
-
     const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
     selectRange(event, {
       start,
       end: getFirstNode()
     });
   };
-
   const rangeSelectToLast = (event, id) => {
     if (!lastSelectedNode.current) {
       lastSelectedNode.current = id;
     }
-
     const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
     selectRange(event, {
       start,
       end: getLastNode()
     });
   };
-
   const selectNextNode = (event, id) => {
     if (!isDisabled(getNextNode(id))) {
       selectRange(event, {
@@ -523,7 +441,6 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
       }, true);
     }
   };
-
   const selectPreviousNode = (event, id) => {
     if (!isDisabled(getPreviousNode(id))) {
       selectRange(event, {
@@ -532,18 +449,16 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
       }, true);
     }
   };
-
   const selectAllNodes = event => {
     selectRange(event, {
       start: getFirstNode(),
       end: getLastNode()
     });
   };
+
   /*
    * Mapping Helpers
    */
-
-
   const registerNode = useCallback(node => {
     const {
       id,
@@ -570,14 +485,12 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, []);
   const unregisterNode = useCallback(id => {
     const newMap = _objectSpread({}, nodeMap.current);
-
     delete newMap[id];
     nodeMap.current = newMap;
     setFocusedNodeId(oldFocusedNodeId => {
       if (oldFocusedNodeId === id && treeRef.current === (treeRef.current.ownerDocument || document).activeElement) {
         return getChildrenIds(null)[0];
       }
-
       return oldFocusedNodeId;
     });
   }, []);
@@ -586,14 +499,13 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, []);
   const unMapFirstChar = useCallback(id => {
     const newMap = _objectSpread({}, firstCharMap.current);
-
     delete newMap[id];
     firstCharMap.current = newMap;
   }, []);
+
   /**
    * Event handlers and Navigation
    */
-
   const handleNextArrow = event => {
     if (isExpandable(focusedNodeId)) {
       if (isExpanded(focusedNodeId)) {
@@ -602,38 +514,31 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
         toggleExpansion(event);
       }
     }
-
     return true;
   };
-
   const handlePreviousArrow = event => {
     if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {
       toggleExpansion(event, focusedNodeId);
       return true;
     }
-
     const parent = getParent(focusedNodeId);
-
     if (parent) {
       focus(event, parent);
       return true;
     }
-
     return false;
   };
-
   const handleKeyDown = event => {
     let flag = false;
     const {
       key
-    } = event; // If the tree is empty there will be no focused node
+    } = event;
 
+    // If the tree is empty there will be no focused node
     if (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
       return;
     }
-
     const ctrlPressed = event.ctrlKey || event.metaKey;
-
     switch (key) {
       case " ":
         if (isSelectable(focusedNodeId) && !isDisabled(focusedNodeId)) {
@@ -648,10 +553,8 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
             flag = selectNode(event, focusedNodeId);
           }
         }
-
         event.stopPropagation();
         break;
-
       case "Enter":
         if (!isDisabled(focusedNodeId)) {
           if (isExpandable(focusedNodeId)) {
@@ -670,54 +573,42 @@ const TreeView = /*#__PURE__*/React.forwardRef((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);
@@ -729,39 +620,31 @@ const TreeView = /*#__PURE__*/React.forwardRef((props, ref) => {
           focusByFirstCharacter(event, focusedNodeId, key);
           flag = true;
         }
-
     }
-
     if (flag) {
       event.preventDefault();
       event.stopPropagation();
     }
-
     if (onKeyDown) {
       onKeyDown(event);
     }
   };
-
   const handleFocus = event => {
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
       const firstSelected = Array.isArray(selected) ? selected[0] : selected;
       focus(event, firstSelected || getNavigableChildrenIds(null)[0]);
     }
-
     if (onFocus) {
       onFocus(event);
     }
   };
-
   const handleBlur = event => {
     setFocusedNodeId(null);
-
     if (onBlur) {
       onBlur(event);
     }
   };
-
   const activeDescendant = nodeMap.current[focusedNodeId] ? nodeMap.current[focusedNodeId].idAttribute : null;
   const treeControlContext = useMemo(() => ({
     treeId,
@@ -814,12 +697,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.
    */
@@ -829,31 +710,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.
    *
@@ -861,12 +737,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.
    *
@@ -874,18 +748,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.
    *
@@ -893,28 +764,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.
    */