@hitachivantara/uikit-react-core 5.66.10 → 5.66.11

package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useControlled = require("../../hooks/useControlled.cjs");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const useForkRef = require("../../hooks/useForkRef.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const DescendantProvider = require("../../TreeView/internals/DescendantProvider.cjs");
@@ -17,517 +18,523 @@ function findNextFirstChar(firstChars, startIndex, char) {
 function noopSelection() {
   return false;
 }
-const HvVerticalNavigationTreeView = React.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 } = TreeView_styles.useClasses(classesProp);
-    const treeviewMode = mode === "treeview";
-    const multiSelect = selectable && multiSelectProp;
-    const treeId = useUniqueId.useUniqueId(idProp);
-    const treeRef = React.useRef(null);
-    const handleRef = useForkRef.useForkRef(treeRef, ref);
-    const [expanded, setExpandedState] = useControlled.useControlled(
-      expandedProp,
-      defaultExpanded
-    );
-    const [selected, setSelectedState] = useControlled.useControlled(
-      selectedProp,
-      defaultSelected
-    );
-    const [focusedNodeId, setFocusedNodeId] = React.useState(null);
-    const nodeMap = React.useRef({});
-    const firstCharMap = React.useRef({});
-    const isExpanded = React.useCallback(
-      (id) => !collapsible || (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false),
-      [collapsible, expanded]
-    );
-    const isExpandable = React.useCallback(
-      (id) => collapsible && nodeMap.current[id] && nodeMap.current[id].expandable,
-      [collapsible]
-    );
-    const isSelected = React.useCallback(
-      (id) => selectable && (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id),
-      [selectable, selected]
-    );
-    const isSelectable = React.useCallback(
-      (id) => selectable && nodeMap.current[id] && nodeMap.current[id].selectable,
-      [selectable]
-    );
-    const isDisabled = React.useCallback((id) => {
-      let node = nodeMap.current[id];
-      if (!node) {
-        return false;
-      }
+const HvVerticalNavigationTreeView = React.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
+  } = useDefaultProps.useDefaultProps("HvVerticalNavigationTreeView", props);
+  const { classes, cx } = TreeView_styles.useClasses(classesProp);
+  const treeviewMode = mode === "treeview";
+  const multiSelect = selectable && multiSelectProp;
+  const treeId = useUniqueId.useUniqueId(idProp);
+  const treeRef = React.useRef(null);
+  const handleRef = useForkRef.useForkRef(treeRef, ref);
+  const [expanded, setExpandedState] = useControlled.useControlled(
+    expandedProp,
+    defaultExpanded
+  );
+  const [selected, setSelectedState] = useControlled.useControlled(
+    selectedProp,
+    defaultSelected
+  );
+  const [focusedNodeId, setFocusedNodeId] = React.useState(null);
+  const nodeMap = React.useRef({});
+  const firstCharMap = React.useRef({});
+  const isExpanded = React.useCallback(
+    (id) => !collapsible || (Array.isArray(expanded) ? expanded.indexOf(id) !== -1 : false),
+    [collapsible, expanded]
+  );
+  const isExpandable = React.useCallback(
+    (id) => collapsible && nodeMap.current[id] && nodeMap.current[id].expandable,
+    [collapsible]
+  );
+  const isSelected = React.useCallback(
+    (id) => selectable && (Array.isArray(selected) ? selected.indexOf(id) !== -1 : selected === id),
+    [selectable, selected]
+  );
+  const isSelectable = React.useCallback(
+    (id) => selectable && nodeMap.current[id] && nodeMap.current[id].selectable,
+    [selectable]
+  );
+  const isDisabled = React.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];
       if (node.disabled) {
         return true;
       }
-      while (node.parentId != null) {
-        node = nodeMap.current[node.parentId];
-        if (node.disabled) {
-          return true;
-        }
+    }
+    return false;
+  }, []);
+  const isFocused = React.useCallback(
+    (id) => focusedNodeId === id,
+    [focusedNodeId]
+  );
+  const isChildSelected = React.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) => {
+      return Array().concat(selected).some((s) => s.startsWith(id) && s.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 = React.useCallback(
+    (id) => {
+      let childrenIds = getChildrenIds(id);
+      if (!disabledItemsFocusable) {
+        childrenIds = childrenIds.filter((node) => !isDisabled(node));
       }
-      return false;
-    }, []);
-    const isFocused = React.useCallback(
-      (id) => focusedNodeId === id,
-      [focusedNodeId]
-    );
-    const isChildSelected = React.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) => {
-        return Array().concat(selected).some((s) => s.startsWith(id) && s.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 = React.useCallback(
-      (id) => {
-        let childrenIds = getChildrenIds(id);
-        if (!disabledItemsFocusable) {
-          childrenIds = childrenIds.filter((node) => !isDisabled(node));
-        }
-        return childrenIds;
-      },
-      [disabledItemsFocusable, isDisabled]
-    );
-    const getNextNode = React.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 childrenIds;
+    },
+    [disabledItemsFocusable, isDisabled]
+  );
+  const getNextNode = React.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;
         }
-        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;
+        node = nodeMap.current[node.parentId];
       }
-      let currentNode = siblings[nodeIndex - 1];
-      while (isExpanded(currentNode) && getNavigableChildrenIds(currentNode).length > 0) {
-        currentNode = getNavigableChildrenIds(currentNode).pop();
+      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 = React.useCallback(
+    (nodeAId, nodeBId) => {
+      if (nodeAId === nodeBId) {
+        return [nodeAId, nodeBId];
       }
-      return currentNode;
-    };
-    const getLastNode = () => {
-      let lastNode = getNavigableChildrenIds(null).pop();
-      while (isExpanded(lastNode)) {
-        lastNode = getNavigableChildrenIds(lastNode).pop();
+      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];
       }
-      return lastNode;
-    };
-    const getFirstNode = () => getNavigableChildrenIds(null)[0];
-    const getParent = (id) => nodeMap.current[id].parentId;
-    const findOrderInTremauxTree = React.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 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;
           }
         }
-        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 = React.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);
+        if (continueB && !aAncestorIsCommon) {
+          bFamily.push(bAncestor);
+          bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+          continueB = bAncestor !== null;
+          if (!bAncestorIsCommon && continueB) {
+            bAncestor = nodeMap.current[bAncestor].parentId;
           }
-          return nodes;
-        }
-        return [];
-      },
-      [findOrderInTremauxTree, getNextNode]
-    );
-    const focus = (event, id) => {
-      if (id) {
-        setFocusedNodeId(id);
-        if (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 = [];
-      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);
+      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 = React.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);
         }
-      });
-      start = firstCharIds.indexOf(id) + 1;
-      if (start >= firstCharIds.length) {
-        start = 0;
+        return nodes;
       }
-      index = findNextFirstChar(firstChars, start, lowercaseChar);
-      if (index === -1) {
-        index = findNextFirstChar(firstChars, 0, lowercaseChar);
+      return [];
+    },
+    [findOrderInTremauxTree, getNextNode]
+  );
+  const focus = (event, id) => {
+    if (id) {
+      setFocusedNodeId(id);
+      if (nodeMap.current[id]?.onFocus) {
+        nodeMap.current[id].onFocus(event);
       }
-      if (index > -1) {
-        focus(event, firstCharIds[index]);
+    }
+  };
+  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);
       }
-    };
-    const toggleExpansion = React.useCallback(
-      (event, value = focusedNodeId) => {
-        if (!value)
-          return;
-        const newExpanded = expanded.includes(value) ? expanded.filter((id) => id !== value) : [value].concat(expanded);
-        if (onToggle) {
-          onToggle(event, newExpanded);
-        }
-        setExpandedState(newExpanded);
-      },
-      [expanded, focusedNodeId, onToggle, setExpandedState]
+    });
+    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 = React.useCallback(
+    (event, value = focusedNodeId) => {
+      if (!value)
+        return;
+      const newExpanded = expanded.includes(value) ? expanded.filter((id) => id !== value) : [value].concat(expanded);
+      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 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 newExpanded = expanded.concat(diff);
+    if (diff.length > 0) {
+      setExpandedState(newExpanded);
+      onToggle?.(event, newExpanded);
+    }
+  };
+  const lastSelectedNode = React.useRef(null);
+  const lastSelectionWasRange = React.useRef(false);
+  const currentRangeSelection = React.useRef([]);
+  const isDivElement = (element) => {
+    return element.nodeType === 1;
+  };
+  const handleRangeArrowSelect = React.useCallback(
+    (event, nodes) => {
+      let base = Array().concat(selected);
+      const { start, next, current } = nodes;
+      if (!next || !current) {
+        return;
       }
-    };
-    const lastSelectedNode = React.useRef(null);
-    const lastSelectionWasRange = React.useRef(false);
-    const currentRangeSelection = React.useRef([]);
-    const isDivElement = (element) => {
-      return element.nodeType === 1;
-    };
-    const handleRangeArrowSelect = React.useCallback(
-      (event, nodes) => {
-        let base = Array().concat(selected);
-        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);
-          }
+      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(current, next);
-        }
-        if (onChange) {
-          onChange(
-            event,
-            base,
-            base.map((id) => nodeMap.current[id]?.payload)
-          );
-        }
-        setSelectedState(base);
-      },
-      [onChange, selected, setSelectedState]
-    );
-    const handleRangeSelect = React.useCallback(
-      (event, nodes) => {
-        let base = Array().concat(selected);
-        const { start, end } = nodes;
-        if (lastSelectionWasRange.current) {
-          base = base.filter(
-            (id) => !currentRangeSelection.current.includes(id)
-          );
-        }
-        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 = React.useCallback(
-      (event, value) => {
-        const newSelected = selected.includes(value) ? selected.filter((id) => id !== value) : [value].concat(selected);
-        if (onChange) {
-          onChange(
-            event,
-            newSelected,
-            newSelected.map((id) => nodeMap.current[id]?.payload)
-          );
-        }
-        setSelectedState(newSelected);
-      },
-      [onChange, selected, setSelectedState]
-    );
-    const handleSingleSelect = React.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 = React.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 = React.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 });
+          currentRangeSelection.current.push(next);
         }
-        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;
+      } else {
+        base.push(next);
+        currentRangeSelection.current.push(current, next);
       }
-      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
+      onChange?.(
+        event,
+        base,
+        base.map((id) => nodeMap.current[id]?.payload)
+      );
+      setSelectedState(base);
+    },
+    [onChange, selected, setSelectedState]
+  );
+  const handleRangeSelect = React.useCallback(
+    (event, nodes) => {
+      let base = Array().concat(selected);
+      const { start, end } = nodes;
+      if (lastSelectionWasRange.current) {
+        base = base.filter(
+          (id) => !currentRangeSelection.current.includes(id)
         );
       }
-    };
-    const selectPreviousNode = (event, id) => {
-      if (!isDisabled(getPreviousNode(id))) {
-        selectRange(
-          event,
-          {
-            end: getPreviousNode(id),
-            current: id
-          },
-          true
-        );
+      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
+      );
+      onChange?.(
+        event,
+        newSelected,
+        newSelected.map((id) => nodeMap.current[id]?.payload)
+      );
+      setSelectedState(newSelected);
+    },
+    [getNodesInRange, isDisabled, onChange, selected, setSelectedState]
+  );
+  const handleMultipleSelect = React.useCallback(
+    (event, value) => {
+      const newSelected = selected.includes(value) ? selected.filter((id) => id !== value) : [value].concat(selected);
+      onChange?.(
+        event,
+        newSelected,
+        newSelected.map((id) => nodeMap.current[id]?.payload)
+      );
+      setSelectedState(newSelected);
+    },
+    [onChange, selected, setSelectedState]
+  );
+  const handleSingleSelect = React.useCallback(
+    (event, value) => {
+      const newSelected = multiSelect ? [value] : value;
+      if (onChange) {
+        const nodeValue = nodeMap.current[newSelected]?.payload;
+        onChange(event, newSelected, multiSelect ? [nodeValue] : nodeValue);
       }
-    };
-    const selectAllNodes = (event) => {
-      selectRange(event, { start: getFirstNode(), end: getLastNode() });
-    };
-    const registerNode = React.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 = React.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 = React.useCallback((id, firstChar) => {
-      firstCharMap.current[id] = firstChar;
-    }, []);
-    const unMapFirstChar = React.useCallback((id) => {
-      const newMap = { ...firstCharMap.current };
-      delete newMap[id];
-      firstCharMap.current = newMap;
-    }, []);
-    const handleNextArrow = (event) => {
-      if (!focusedNodeId)
-        return false;
-      if (isExpandable(focusedNodeId)) {
-        if (isExpanded(focusedNodeId)) {
-          focusNextNode(event, focusedNodeId);
-        } else if (!isDisabled(focusedNodeId)) {
-          toggleExpansion(event);
+      setSelectedState(newSelected);
+    },
+    [multiSelect, onChange, setSelectedState]
+  );
+  const selectNode = React.useCallback(
+    (event, id, multiple = false) => {
+      if (id && isSelectable(id)) {
+        if (multiple) {
+          handleMultipleSelect(event, id);
+        } else {
+          handleSingleSelect(event, id);
         }
-      }
-      return true;
-    };
-    const handlePreviousArrow = (event) => {
-      if (!focusedNodeId)
-        return false;
-      if (isExpanded(focusedNodeId) && !isDisabled(focusedNodeId)) {
-        toggleExpansion(event, focusedNodeId);
-        return true;
-      }
-      const parent = getParent(focusedNodeId);
-      if (parent) {
-        focus(event, parent);
+        lastSelectedNode.current = id;
+        lastSelectionWasRange.current = false;
+        currentRangeSelection.current = [];
         return true;
       }
       return false;
+    },
+    [handleMultipleSelect, handleSingleSelect, isSelectable]
+  );
+  const selectRange = React.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,
+      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 = React.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 handleKeyDown = (event) => {
-      let flag = false;
-      const { key } = event;
-      if (event.altKey || event.currentTarget !== event.target || !focusedNodeId) {
-        return;
+  }, []);
+  const unregisterNode = React.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];
       }
-      const ctrlPressed = event.ctrlKey || event.metaKey;
-      switch (key) {
-        case " ":
-          if (isSelectable(focusedNodeId) && !isDisabled(focusedNodeId)) {
+      return oldFocusedNodeId;
+    });
+  }, []);
+  const mapFirstChar = React.useCallback((id, firstChar) => {
+    firstCharMap.current[id] = firstChar;
+  }, []);
+  const unMapFirstChar = React.useCallback((id) => {
+    const newMap = { ...firstCharMap.current };
+    delete newMap[id];
+    firstCharMap.current = newMap;
+  }, []);
+  const handleNextArrow = (event) => {
+    if (!focusedNodeId)
+      return false;
+    if (isExpandable(focusedNodeId)) {
+      if (isExpanded(focusedNodeId)) {
+        focusNextNode(event, focusedNodeId);
+      } else if (!isDisabled(focusedNodeId)) {
+        toggleExpansion(event);
+      }
+    }
+    return true;
+  };
+  const handlePreviousArrow = (event) => {
+    if (!focusedNodeId)
+      return false;
+    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)) {
             if (multiSelect && event.shiftKey) {
               selectRange(event, { end: focusedNodeId });
               flag = true;
@@ -537,159 +544,135 @@ const HvVerticalNavigationTreeView = React.forwardRef(
               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);
+        }
+        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;
-          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);
+        } else if (multiSelect && ctrlPressed && key.toLowerCase() === "a") {
+          selectAllNodes(event);
           flag = true;
-          break;
-        case "End":
-          if (multiSelect && ctrlPressed && event.shiftKey && !isDisabled(focusedNodeId)) {
-            rangeSelectToLast(event, focusedNodeId);
-          }
-          focusLastNode(event);
+        } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
+          focusByFirstCharacter(event, focusedNodeId, key);
           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 = React.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 = React.useMemo(
-      () => ({
-        isExpanded,
-        isSelected,
-        isFocused,
-        isDisabled,
-        isChildSelected
-      }),
-      [isDisabled, isExpanded, isFocused, isSelected, isChildSelected]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(TreeViewContext.TreeViewControlContext.Provider, { value: treeControlContext, children: /* @__PURE__ */ jsxRuntime.jsx(TreeViewContext.TreeViewStateContext.Provider, { value: treeStateContext, children: /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { children: /* @__PURE__ */ jsxRuntime.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
-      }
-    ) }) }) });
-  }
-);
+        }
+    }
+    if (flag) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    onKeyDown?.(event);
+  };
+  const handleFocus = (event) => {
+    if (event.target === event.currentTarget) {
+      const firstSelected = Array.isArray(selected) ? selected[0] : selected;
+      focus(event, firstSelected || getNavigableChildrenIds(null)[0]);
+    }
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    setFocusedNodeId(null);
+    onBlur?.(event);
+  };
+  const activeDescendant = focusedNodeId && nodeMap.current[focusedNodeId] ? nodeMap.current[focusedNodeId].idAttribute : null;
+  const treeControlContext = React.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 = React.useMemo(
+    () => ({
+      isExpanded,
+      isSelected,
+      isFocused,
+      isDisabled,
+      isChildSelected
+    }),
+    [isDisabled, isExpanded, isFocused, isSelected, isChildSelected]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TreeViewContext.TreeViewControlContext.Provider, { value: treeControlContext, children: /* @__PURE__ */ jsxRuntime.jsx(TreeViewContext.TreeViewStateContext.Provider, { value: treeStateContext, children: /* @__PURE__ */ jsxRuntime.jsx(DescendantProvider.DescendantProvider, { children: /* @__PURE__ */ jsxRuntime.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
+    }
+  ) }) }) });
+});
 exports.treeViewClasses = TreeView_styles.staticClasses;
 exports.HvVerticalNavigationTreeView = HvVerticalNavigationTreeView;