@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

package/dist/esm/components/VerticalNavigation/TreeView/TreeView.js

@@ -21,489 +21,521 @@ function findNextFirstChar(firstChars, startIndex, char) {
 function noopSelection() {
   return false;
 }
-const HvVerticalNavigationTreeView = forwardRef((props, ref) => {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    mode = "treeview",
-    collapsible = false,
-    expanded: expandedProp,
-    defaultExpanded = [],
-    onToggle,
-    selectable = false,
-    multiSelect: multiSelectProp = false,
-    selected: selectedProp,
-    defaultSelected = [],
-    onChange,
-    disabledItemsFocusable = false,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    children,
-    ...others
-  } = props;
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  const treeviewMode = mode === "treeview";
-  const multiSelect = selectable && multiSelectProp;
-  const treeId = useUniqueId(idProp, "hvtreeview");
-  const treeRef = useRef(null);
-  const handleRef = useForkRef(treeRef, ref);
-  const [expanded, setExpandedState] = useControlled(expandedProp, defaultExpanded);
-  const [selected, setSelectedState] = useControlled(selectedProp, defaultSelected);
-  const [focusedNodeId, setFocusedNodeId] = useState(null);
-  const nodeMap = useRef({});
-  const firstCharMap = useRef({});
-  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];
-    if (!node) {
-      return false;
-    }
-    if (node.disabled) {
-      return true;
-    }
-    while (node.parentId != null) {
-      node = nodeMap.current[node.parentId];
+const HvVerticalNavigationTreeView = forwardRef(
+  (props, ref) => {
+    const {
+      id: idProp,
+      className,
+      classes: classesProp,
+      mode = "treeview",
+      collapsible = false,
+      expanded: expandedProp,
+      defaultExpanded = [],
+      onToggle,
+      selectable = false,
+      multiSelect: multiSelectProp = false,
+      selected: selectedProp,
+      defaultSelected = [],
+      onChange,
+      disabledItemsFocusable = false,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      children,
+      ...others
+    } = props;
+    const { classes, cx } = useClasses(classesProp);
+    const treeviewMode = mode === "treeview";
+    const multiSelect = selectable && multiSelectProp;
+    const treeId = useUniqueId(idProp, "hvtreeview");
+    const treeRef = useRef(null);
+    const handleRef = useForkRef(treeRef, ref);
+    const [expanded, setExpandedState] = useControlled(
+      expandedProp,
+      defaultExpanded
+    );
+    const [selected, setSelectedState] = useControlled(
+      selectedProp,
+      defaultSelected
+    );
+    const [focusedNodeId, setFocusedNodeId] = useState(null);
+    const nodeMap = useRef({});
+    const firstCharMap = useRef({});
+    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];
+      if (!node) {
+        return false;
+      }
       if (node.disabled) {
         return true;
       }
-    }
-    return false;
-  }, []);
-  const isFocused = useCallback((id) => focusedNodeId === id, [focusedNodeId]);
-  const isChildSelected = useCallback(
-    // the second part of the condition is to ensure that the id we're
-    // looking at is actually of a child (ie, there's at least one "-")
-    (id) => selected.startsWith(id) && selected.includes("-"),
-    [selected]
-  );
-  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]);
-  const getNextNode = useCallback((id) => {
-    if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {
-      return getNavigableChildrenIds(id)[0];
-    }
-    let node = nodeMap.current[id];
-    while (node != null) {
-      const siblings = getNavigableChildrenIds(node.parentId);
-      const nextSibling = siblings[siblings.indexOf(node.id) + 1];
-      if (nextSibling) {
-        return nextSibling;
-      }
-      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;
-  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;
-    let bAncestor = nodeB.parentId;
-    let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
-    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;
+      while (node.parentId != null) {
+        node = nodeMap.current[node.parentId];
+        if (node.disabled) {
+          return true;
         }
       }
-      if (continueB && !aAncestorIsCommon) {
-        bFamily.push(bAncestor);
-        bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
-        continueB = bAncestor !== null;
-        if (!bAncestorIsCommon && continueB) {
-          bAncestor = nodeMap.current[bAncestor].parentId;
+      return false;
+    }, []);
+    const isFocused = useCallback(
+      (id) => focusedNodeId === id,
+      [focusedNodeId]
+    );
+    const isChildSelected = useCallback(
+      // the second part of the condition is to ensure that the id we're
+      // looking at is actually of a child (ie, there's at least one "-")
+      (id) => selected.startsWith(id) && selected.includes("-"),
+      [selected]
+    );
+    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]
+    );
+    const getNextNode = useCallback(
+      (id) => {
+        if (isExpanded(id) && getNavigableChildrenIds(id).length > 0) {
+          return getNavigableChildrenIds(id)[0];
+        }
+        let node = nodeMap.current[id];
+        while (node != null) {
+          const siblings = getNavigableChildrenIds(node.parentId);
+          const nextSibling = siblings[siblings.indexOf(node.id) + 1];
+          if (nextSibling) {
+            return nextSibling;
+          }
+          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;
       }
-    }
-    const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-    const ancestorFamily = getChildrenIds(commonAncestor);
-    const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
-    const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
-    return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [nodeAId, nodeBId] : [nodeBId, nodeAId];
-  }, []);
-  const getNodesInRange = useCallback((nodeA, nodeB) => {
-    if (nodeA && nodeB) {
-      const [first, last] = findOrderInTremauxTree(nodeA, nodeB);
-      const nodes = [first];
-      let current = first;
-      while (current !== last) {
-        current = getNextNode(current);
-        nodes.push(current);
+      let currentNode = siblings[nodeIndex - 1];
+      while (isExpanded(currentNode) && getNavigableChildrenIds(currentNode).length > 0) {
+        currentNode = getNavigableChildrenIds(currentNode).pop();
       }
-      return nodes;
-    }
-    return [];
-  }, [findOrderInTremauxTree, getNextNode]);
-  const focus = (event, id) => {
-    if (id) {
-      setFocusedNodeId(id);
-      if (nodeMap.current[id]?.onFocus) {
-        nodeMap.current[id].onFocus(event);
+      return currentNode;
+    };
+    const getLastNode = () => {
+      let lastNode = getNavigableChildrenIds(null).pop();
+      while (isExpanded(lastNode)) {
+        lastNode = getNavigableChildrenIds(lastNode).pop();
       }
-    }
-  };
-  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 = [];
-    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);
+      return lastNode;
+    };
+    const getFirstNode = () => getNavigableChildrenIds(null)[0];
+    const getParent = (id) => nodeMap.current[id].parentId;
+    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;
+        let bAncestor = nodeB.parentId;
+        let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
+        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];
+        const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
+        return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [nodeAId, nodeBId] : [nodeBId, nodeAId];
+      },
+      []
+    );
+    const getNodesInRange = useCallback(
+      (nodeA, nodeB) => {
+        if (nodeA && nodeB) {
+          const [first, last] = findOrderInTremauxTree(nodeA, nodeB);
+          const nodes = [first];
+          let current = first;
+          while (current !== last) {
+            current = getNextNode(current);
+            nodes.push(current);
+          }
+          return nodes;
+        }
+        return [];
+      },
+      [findOrderInTremauxTree, getNextNode]
+    );
+    const focus = (event, id) => {
+      if (id) {
+        setFocusedNodeId(id);
+        if (nodeMap.current[id]?.onFocus) {
+          nodeMap.current[id].onFocus(event);
+        }
       }
-    });
-    start = firstCharIds.indexOf(id) + 1;
-    if (start >= firstCharIds.length) {
-      start = 0;
-    }
-    index = findNextFirstChar(firstChars, start, lowercaseChar);
-    if (index === -1) {
-      index = findNextFirstChar(firstChars, 0, lowercaseChar);
-    }
-    if (index > -1) {
-      focus(event, firstCharIds[index]);
-    }
-  };
-  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);
+    };
+    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 = [];
+      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);
+        }
+      });
+      start = firstCharIds.indexOf(id) + 1;
+      if (start >= firstCharIds.length) {
+        start = 0;
       }
-    }
-  };
-  const lastSelectedNode = useRef(null);
-  const lastSelectionWasRange = useRef(false);
-  const currentRangeSelection = useRef([]);
-  const isDivElement = (element) => {
-    return element.nodeType === 1;
-  };
-  const handleRangeArrowSelect = useCallback((event, nodes) => {
-    let base = selected.slice();
-    const {
-      start,
-      next,
-      current
-    } = nodes;
-    if (!next || !current) {
-      return;
-    }
-    if (isDivElement(current) && currentRangeSelection.current.indexOf(current) === -1) {
-      currentRangeSelection.current = [];
-    }
-    if (lastSelectionWasRange.current) {
-      if (isDivElement(next) && currentRangeSelection.current.indexOf(next) !== -1) {
-        base = base.filter((id) => id === start || id !== current);
-        currentRangeSelection.current = currentRangeSelection.current.filter((id) => id === start || id !== current);
-      } else {
-        base.push(next);
-        currentRangeSelection.current.push(next);
+      index = findNextFirstChar(firstChars, start, lowercaseChar);
+      if (index === -1) {
+        index = findNextFirstChar(firstChars, 0, lowercaseChar);
       }
-    } else {
-      base.push(next);
-      currentRangeSelection.current.push(current, next);
-    }
-    if (onChange) {
-      onChange(event, base, base.map((id) => nodeMap.current[id]?.payload));
-    }
-    setSelectedState(base);
-  }, [onChange, selected, setSelectedState]);
-  const handleRangeSelect = useCallback((event, nodes) => {
-    let base = selected.slice();
-    const {
-      start,
-      end
-    } = nodes;
-    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) => nodeMap.current[id]?.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) => nodeMap.current[id]?.payload));
-    }
-    setSelectedState(newSelected);
-  }, [onChange, selected, setSelectedState]);
-  const handleSingleSelect = useCallback((event, value) => {
-    const newSelected = multiSelect ? [value] : value;
-    if (onChange) {
-      const nodeValue = nodeMap.current[newSelected]?.payload;
-      onChange(event, newSelected, multiSelect ? [nodeValue] : nodeValue);
-    }
-    setSelectedState(newSelected);
-  }, [multiSelect, onChange, setSelectedState]);
-  const selectNode = useCallback((event, id, multiple = false) => {
-    if (id && isSelectable(id)) {
-      if (multiple) {
-        handleMultipleSelect(event, id);
-      } else {
-        handleSingleSelect(event, id);
+      if (index > -1) {
+        focus(event, firstCharIds[index]);
       }
-      lastSelectedNode.current = id;
-      lastSelectionWasRange.current = false;
-      currentRangeSelection.current = [];
-      return true;
-    }
-    return false;
-  }, [handleMultipleSelect, handleSingleSelect, isSelectable]);
-  const selectRange = useCallback((event, nodes, stacked = false) => {
-    const {
-      start = lastSelectedNode.current,
-      end,
-      current
-    } = nodes;
-    if (stacked) {
-      handleRangeArrowSelect(event, {
+    };
+    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);
+        }
+      }
+    };
+    const lastSelectedNode = useRef(null);
+    const lastSelectionWasRange = useRef(false);
+    const currentRangeSelection = useRef([]);
+    const isDivElement = (element) => {
+      return element.nodeType === 1;
+    };
+    const handleRangeArrowSelect = useCallback(
+      (event, nodes) => {
+        let base = selected.slice();
+        const { start, next, current } = nodes;
+        if (!next || !current) {
+          return;
+        }
+        if (isDivElement(current) && currentRangeSelection.current.indexOf(current) === -1) {
+          currentRangeSelection.current = [];
+        }
+        if (lastSelectionWasRange.current) {
+          if (isDivElement(next) && currentRangeSelection.current.indexOf(next) !== -1) {
+            base = base.filter((id) => id === start || id !== current);
+            currentRangeSelection.current = currentRangeSelection.current.filter(
+              (id) => 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((id) => nodeMap.current[id]?.payload)
+          );
+        }
+        setSelectedState(base);
+      },
+      [onChange, selected, setSelectedState]
+    );
+    const handleRangeSelect = useCallback(
+      (event, nodes) => {
+        let base = selected.slice();
+        const { start, end } = nodes;
+        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) => nodeMap.current[id]?.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) => nodeMap.current[id]?.payload)
+          );
+        }
+        setSelectedState(newSelected);
+      },
+      [onChange, selected, setSelectedState]
+    );
+    const handleSingleSelect = useCallback(
+      (event, value) => {
+        const newSelected = multiSelect ? [value] : value;
+        if (onChange) {
+          const nodeValue = nodeMap.current[newSelected]?.payload;
+          onChange(event, newSelected, multiSelect ? [nodeValue] : nodeValue);
+        }
+        setSelectedState(newSelected);
+      },
+      [multiSelect, onChange, setSelectedState]
+    );
+    const selectNode = useCallback(
+      (event, id, multiple = 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]
+    );
+    const selectRange = useCallback(
+      (event, nodes, stacked = false) => {
+        const { start = lastSelectedNode.current, end, current } = nodes;
+        if (stacked) {
+          handleRangeArrowSelect(event, { start, next: end, current });
+        } else if (start != null && end != null) {
+          handleRangeSelect(event, { start, 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,
-        next: end,
-        current
+        end: getFirstNode()
       });
-    } else if (start != null && end != null) {
-      handleRangeSelect(event, {
+    };
+    const rangeSelectToLast = (event, id) => {
+      if (!lastSelectedNode.current) {
+        lastSelectedNode.current = id;
+      }
+      const start = lastSelectionWasRange.current ? lastSelectedNode.current : id;
+      selectRange(event, {
         start,
-        end
+        end: getLastNode()
       });
-    }
-    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, {
-        end: getNextNode(id),
-        current: id
-      }, true);
-    }
-  };
-  const selectPreviousNode = (event, id) => {
-    if (!isDisabled(getPreviousNode(id))) {
-      selectRange(event, {
-        end: getPreviousNode(id),
-        current: id
-      }, true);
-    }
-  };
-  const selectAllNodes = (event) => {
-    selectRange(event, {
-      start: getFirstNode(),
-      end: getLastNode()
-    });
-  };
-  const registerNode = useCallback((node) => {
-    const {
-      id,
-      index,
-      parentId,
-      expandable,
-      idAttribute,
-      disabled,
-      selectable: nodeSelectable,
-      onFocus: nodeOnFocus,
-      payload
-    } = node;
-    nodeMap.current[id] = {
-      id,
-      index,
-      parentId,
-      expandable,
-      idAttribute,
-      disabled,
-      selectable: nodeSelectable,
-      onFocus: nodeOnFocus,
-      payload
     };
-  }, []);
-  const unregisterNode = useCallback((id) => {
-    const newMap = {
-      ...nodeMap.current
+    const selectNextNode = (event, id) => {
+      if (!isDisabled(getNextNode(id))) {
+        selectRange(
+          event,
+          {
+            end: getNextNode(id),
+            current: id
+          },
+          true
+        );
+      }
     };
-    delete newMap[id];
-    nodeMap.current = newMap;
-    setFocusedNodeId((oldFocusedNodeId) => {
-      if (oldFocusedNodeId === id && treeRef.current && treeRef.current === (treeRef.current.ownerDocument || document).activeElement) {
-        return getChildrenIds(null)[0];
+    const selectPreviousNode = (event, id) => {
+      if (!isDisabled(getPreviousNode(id))) {
+        selectRange(
+          event,
+          {
+            end: getPreviousNode(id),
+            current: id
+          },
+          true
+        );
       }
-      return oldFocusedNodeId;
-    });
-  }, []);
-  const mapFirstChar = useCallback((id, firstChar) => {
-    firstCharMap.current[id] = firstChar;
-  }, []);
-  const unMapFirstChar = useCallback((id) => {
-    const newMap = {
-      ...firstCharMap.current
     };
-    delete newMap[id];
-    firstCharMap.current = newMap;
-  }, []);
-  const handleNextArrow = (event) => {
-    if (isExpandable(focusedNodeId)) {
-      if (isExpanded(focusedNodeId)) {
-        focusNextNode(event, focusedNodeId);
-      } else if (!isDisabled(focusedNodeId)) {
-        toggleExpansion(event);
+    const selectAllNodes = (event) => {
+      selectRange(event, { start: getFirstNode(), end: getLastNode() });
+    };
+    const registerNode = useCallback((node) => {
+      const {
+        id,
+        index,
+        parentId,
+        expandable,
+        idAttribute,
+        disabled,
+        selectable: nodeSelectable,
+        onFocus: nodeOnFocus,
+        payload
+      } = node;
+      nodeMap.current[id] = {
+        id,
+        index,
+        parentId,
+        expandable,
+        idAttribute,
+        disabled,
+        selectable: nodeSelectable,
+        onFocus: nodeOnFocus,
+        payload
+      };
+    }, []);
+    const unregisterNode = useCallback((id) => {
+      const newMap = { ...nodeMap.current };
+      delete newMap[id];
+      nodeMap.current = newMap;
+      setFocusedNodeId((oldFocusedNodeId) => {
+        if (oldFocusedNodeId === id && treeRef.current && treeRef.current === (treeRef.current.ownerDocument || document).activeElement) {
+          return getChildrenIds(null)[0];
+        }
+        return oldFocusedNodeId;
+      });
+    }, []);
+    const mapFirstChar = useCallback((id, firstChar) => {
+      firstCharMap.current[id] = firstChar;
+    }, []);
+    const unMapFirstChar = useCallback((id) => {
+      const newMap = { ...firstCharMap.current };
+      delete newMap[id];
+      firstCharMap.current = newMap;
+    }, []);
+    const handleNextArrow = (event) => {
+      if (isExpandable(focusedNodeId)) {
+        if (isExpanded(focusedNodeId)) {
+          focusNextNode(event, focusedNodeId);
+        } else if (!isDisabled(focusedNodeId)) {
+          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 (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
-      return;
-    }
-    const 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)) {
+    };
+    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 (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
+        return;
+      }
+      const ctrlPressed = event.ctrlKey || event.metaKey;
+      switch (key) {
+        case " ":
+          if (isSelectable(focusedNodeId) && !isDisabled(focusedNodeId)) {
             if (multiSelect && event.shiftKey) {
-              selectRange(event, {
-                end: focusedNodeId
-              });
+              selectRange(event, { end: focusedNodeId });
               flag = true;
             } else if (multiSelect) {
               flag = selectNode(event, focusedNodeId, true);
@@ -511,112 +543,160 @@ const HvVerticalNavigationTreeView = forwardRef((props, ref) => {
               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);
+          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;
-        } else if (multiSelect && ctrlPressed && key.toLowerCase() === "a") {
-          selectAllNodes(event);
+          break;
+        case "ArrowUp":
+          if (multiSelect && event.shiftKey) {
+            selectPreviousNode(event, focusedNodeId);
+          }
+          focusPreviousNode(event, focusedNodeId);
           flag = true;
-        } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
-          focusByFirstCharacter(event, focusedNodeId, key);
+          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;
-        }
-    }
-    if (flag) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  const handleFocus = (event) => {
-    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 = focusedNodeId && nodeMap.current[focusedNodeId] ? nodeMap.current[focusedNodeId].idAttribute : null;
-  const treeControlContext = useMemo(() => ({
-    treeId,
-    mode,
-    collapsible,
-    toggleExpansion,
-    multiSelect,
-    selectNode: selectable ? selectNode : noopSelection,
-    selectRange: selectable ? selectRange : noopSelection,
-    disabledItemsFocusable,
-    registerNode,
-    unregisterNode,
-    mapFirstChar,
-    unMapFirstChar,
-    focus
-  }), [registerNode, unregisterNode, mapFirstChar, unMapFirstChar, toggleExpansion, selectable, selectNode, selectRange, mode, collapsible, multiSelect, disabledItemsFocusable, treeId]);
-  const treeStateContext = useMemo(() => ({
-    isExpanded,
-    isSelected,
-    isFocused,
-    isDisabled,
-    isChildSelected
-  }), [isDisabled, isExpanded, isFocused, isSelected, isChildSelected]);
-  return /* @__PURE__ */ jsx(TreeViewControlContext.Provider, { value: treeControlContext, children: /* @__PURE__ */ jsx(TreeViewStateContext.Provider, { value: treeStateContext, children: /* @__PURE__ */ jsx(DescendantProvider, { children: /* @__PURE__ */ jsx("ul", { ref: handleRef, id: idProp, className: cx(classes.root, className), ...treeviewMode && {
-    id: treeId,
-    role: "tree",
-    "aria-multiselectable": multiSelect,
-    "aria-activedescendant": activeDescendant,
-    tabIndex: 0,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown
-  }, ...others, children }) }) }) });
-});
+          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);
+      }
+    };
+    const handleFocus = (event) => {
+      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 = focusedNodeId && nodeMap.current[focusedNodeId] ? nodeMap.current[focusedNodeId].idAttribute : null;
+    const treeControlContext = useMemo(
+      () => ({
+        treeId,
+        mode,
+        collapsible,
+        toggleExpansion,
+        multiSelect,
+        selectNode: selectable ? selectNode : noopSelection,
+        selectRange: selectable ? selectRange : noopSelection,
+        disabledItemsFocusable,
+        registerNode,
+        unregisterNode,
+        mapFirstChar,
+        unMapFirstChar,
+        focus
+      }),
+      [
+        registerNode,
+        unregisterNode,
+        mapFirstChar,
+        unMapFirstChar,
+        toggleExpansion,
+        selectable,
+        selectNode,
+        selectRange,
+        mode,
+        collapsible,
+        multiSelect,
+        disabledItemsFocusable,
+        treeId
+      ]
+    );
+    const treeStateContext = useMemo(
+      () => ({
+        isExpanded,
+        isSelected,
+        isFocused,
+        isDisabled,
+        isChildSelected
+      }),
+      [isDisabled, isExpanded, isFocused, isSelected, isChildSelected]
+    );
+    return /* @__PURE__ */ jsx(TreeViewControlContext.Provider, { value: treeControlContext, children: /* @__PURE__ */ jsx(TreeViewStateContext.Provider, { value: treeStateContext, children: /* @__PURE__ */ jsx(DescendantProvider, { children: /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: handleRef,
+        id: idProp,
+        className: cx(classes.root, className),
+        ...treeviewMode && {
+          id: treeId,
+          role: "tree",
+          "aria-multiselectable": multiSelect,
+          "aria-activedescendant": activeDescendant,
+          tabIndex: 0,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown
+        },
+        ...others,
+        children
+      }
+    ) }) }) });
+  }
+);
 export {
   HvVerticalNavigationTreeView,
   staticClasses as treeViewClasses