@hitachivantara/uikit-react-core 3.52.5

package/dist/VerticalNavigation/TreeView/TreeView.js

@@ -0,0 +1,1052 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.match.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.array.slice.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _ = require("../..");
+
+var _TreeViewContexts = require("./TreeViewContexts");
+
+var _descendants = require("./descendants");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["id", "className", "classes", "mode", "collapsible", "expanded", "defaultExpanded", "onToggle", "selectable", "multiSelect", "selected", "defaultSelected", "onChange", "disabledItemsFocusable", "onFocus", "onBlur", "onKeyDown", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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.default.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var treeviewMode = mode === "treeview";
+  var multiSelect = selectable && multiSelectProp;
+  var treeId = (0, _.useUniqueId)(idProp, "hvtreeview");
+  var treeRef = (0, _react.useRef)(null);
+  var handleRef = (0, _.useForkRef)(treeRef, ref);
+
+  var _useControlled = (0, _.useControlled)(expandedProp, defaultExpanded),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+      expanded = _useControlled2[0],
+      setExpandedState = _useControlled2[1];
+
+  var _useControlled3 = (0, _.useControlled)(selectedProp, defaultSelected),
+      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 2),
+      selected = _useControlled4[0],
+      setSelectedState = _useControlled4[1];
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      focusedNodeId = _useState2[0],
+      setFocusedNodeId = _useState2[1];
+
+  var nodeMap = (0, _react.useRef)({});
+  var firstCharMap = (0, _react.useRef)({});
+  /*
+   * Status Helpers
+   */
+
+  var isExpanded = (0, _react.useCallback)(function (id) {
+    return !collapsible || (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false);
+  }, [collapsible, expanded]);
+  var isExpandable = (0, _react.useCallback)(function (id) {
+    return collapsible && nodeMap.current[id] && nodeMap.current[id].expandable;
+  }, [collapsible]);
+  var isSelected = (0, _react.useCallback)(function (id) {
+    return selectable && (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id);
+  }, [selectable, selected]);
+  var isSelectable = (0, _react.useCallback)(function (id) {
+    return selectable && nodeMap.current[id] && nodeMap.current[id].selectable;
+  }, [selectable]);
+  var isDisabled = (0, _react.useCallback)(function (id) {
+    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 = (0, _react.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];
+    }).filter(function (node) {
+      return node.parentId === id;
+    }).sort(function (a, b) {
+      return a.index - b.index;
+    }).map(function (child) {
+      return child.id;
+    });
+  };
+
+  var getNavigableChildrenIds = (0, _react.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 = (0, _react.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.
+
+
+      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.
+   *
+   * 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 = (0, _react.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;
+    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 = (0, _react.useCallback)(function (nodeA, nodeB) {
+    var _findOrderInTremauxTr = findOrderInTremauxTree(nodeA, nodeB),
+        _findOrderInTremauxTr2 = (0, _slicedToArray2.default)(_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
+
+    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
+
+    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
+
+    if (index === -1) {
+      index = findNextFirstChar(firstChars, 0, lowercaseChar);
+    } // If match was found...
+
+
+    if (index > -1) {
+      focus(event, firstCharIds[index]);
+    }
+  };
+  /*
+   * Expansion Helpers
+   */
+
+
+  var toggleExpansion = (0, _react.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;
+      });
+    } 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);
+    var diff = siblings.filter(function (child) {
+      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 = (0, _react.useRef)(null);
+  var lastSelectionWasRange = (0, _react.useRef)(false);
+  var currentRangeSelection = (0, _react.useRef)([]);
+  var handleRangeArrowSelect = (0, _react.useCallback)(function (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 (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 = (0, _react.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.
+
+    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 (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 = (0, _react.useCallback)(function (event, value) {
+    var newSelected;
+
+    if (selected.indexOf(value) !== -1) {
+      newSelected = selected.filter(function (id) {
+        return id !== value;
+      });
+    } 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 = (0, _react.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 = (0, _react.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 = (0, _react.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;
+
+    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;
+  }, [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, {
+        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 = (0, _react.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;
+    nodeMap.current[id] = {
+      id: id,
+      index: index,
+      parentId: parentId,
+      expandable: expandable,
+      idAttribute: idAttribute,
+      disabled: disabled,
+      selectable: nodeSelectable,
+      onFocus: nodeOnFocus,
+      payload: payload
+    };
+  }, []);
+  var unregisterNode = (0, _react.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;
+    });
+  }, []);
+  var mapFirstChar = (0, _react.useCallback)(function (id, firstChar) {
+    firstCharMap.current[id] = firstChar;
+  }, []);
+  var unMapFirstChar = (0, _react.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)) {
+        focusNextNode(event, focusedNodeId);
+      } else if (!isDisabled(focusedNodeId)) {
+        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
+
+    if (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
+      return;
+    }
+
+    var ctrlPressed = event.ctrlKey || event.metaKey;
+
+    switch (key) {
+      case " ":
+        if (isSelectable(focusedNodeId) && !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 (isSelectable(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 "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);
+          flag = true;
+        } else if (multiSelect && ctrlPressed && key.toLowerCase() === "a") {
+          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;
+  var treeControlContext = (0, _react.useMemo)(function () {
+    return {
+      treeId: treeId,
+      mode: mode,
+      collapsible: collapsible,
+      toggleExpansion: toggleExpansion,
+      multiSelect: multiSelect,
+      selectNode: selectable ? selectNode : noopSelection,
+      selectRange: selectable ? selectRange : noopSelection,
+      disabledItemsFocusable: disabledItemsFocusable,
+      registerNode: registerNode,
+      unregisterNode: unregisterNode,
+      mapFirstChar: mapFirstChar,
+      unMapFirstChar: unMapFirstChar,
+      focus: focus
+    };
+  }, [registerNode, unregisterNode, mapFirstChar, unMapFirstChar, toggleExpansion, selectable, selectNode, selectRange, mode, collapsible, multiSelect, disabledItemsFocusable, treeId]);
+  var treeStateContext = (0, _react.useMemo)(function () {
+    return {
+      isExpanded: isExpanded,
+      isSelected: isSelected,
+      isFocused: isFocused,
+      isDisabled: isDisabled
+    };
+  }, [isDisabled, isExpanded, isFocused, isSelected]);
+  return /*#__PURE__*/_react.default.createElement(_TreeViewContexts.TreeViewControlContext.Provider, {
+    value: treeControlContext
+  }, /*#__PURE__*/_react.default.createElement(_TreeViewContexts.TreeViewStateContext.Provider, {
+    value: treeStateContext
+  }, /*#__PURE__*/_react.default.createElement(_descendants.DescendantProvider, null, /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
+    ref: handleRef,
+    id: idProp,
+    className: (0, _clsx.default)(classes.root, className)
+  }, treeviewMode && {
+    id: treeId,
+    role: "tree",
+    "aria-multiselectable": multiSelect,
+    "aria-activedescendant": activeDescendant,
+    tabIndex: 0,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown
+  }, others), children))));
+});
+
+TreeView.propTypes = {
+  /**
+   * Id to be applied to the root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the Radio button.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Style applied to component.
+     */
+    root: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Modus operandi (role) of the widget instance.
+   */
+  mode: _propTypes.default.oneOf(["treeview", "navigation"]),
+
+  /**
+   * Enables selection.
+   * @default false
+   */
+  selectable: _propTypes.default.bool,
+
+  /**
+   * Enables the simultaneous selection of multiple items.
+   * @default false
+   */
+  multiSelect: _propTypes.default.bool,
+
+  /**
+   * The selected nodes' ids.
+   *
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selected: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string]),
+
+  /**
+   * When uncontrolled, defines the initial selected nodes' ids.
+   *
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelected: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string]),
+
+  /**
+   * Can non-leaf nodes be collapsed / expanded.
+   */
+  collapsible: _propTypes.default.bool,
+
+  /**
+   * Callback fired when a tree item is selected.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} nodeId The id of the selected node.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Expanded nodes' ids.
+   */
+  expanded: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * When uncontrolled, defines the initial expanded nodes' ids.
+   * @default []
+   */
+  defaultExpanded: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Callback fired when tree items are expanded/collapsed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {array} nodeIds The ids of the expanded nodes (old and new).
+   */
+  onToggle: _propTypes.default.func,
+
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable: _propTypes.default.bool,
+
+  /**
+   * @ignore
+   */
+  onFocus: _propTypes.default.func,
+
+  /**
+   * @ignore
+   */
+  onBlur: _propTypes.default.func,
+
+  /**
+   * @ignore
+   */
+  onKeyDown: _propTypes.default.func,
+
+  /**
+   * The content of the component.
+   */
+  children: _propTypes.default.node
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvVerticalNavigationTreeView"
+})(TreeView);
+
+exports.default = _default;
+//# sourceMappingURL=TreeView.js.map