@hitachivantara/uikit-react-core 5.0.0-next.16 → 5.0.0-next.18

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

@@ -0,0 +1,641 @@
+import { forwardRef, useRef, useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.js";
+import { DescendantProvider } from "./descendants.js";
+import { StyledRoot } from "./TreeView.styles.js";
+import treeViewClasses from "./treeViewClasses.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../../../hooks/useUniqueId.js";
+import useForkRef from "../../../hooks/useForkRef.js";
+import { useControlled } from "../../../hooks/useControlled.js";
+function isPrintableCharacter(string) {
+  return string && string.length === 1 && string.match(/\S/);
+}
+function findNextFirstChar(firstChars, startIndex, char) {
+  for (let i = startIndex; i < firstChars.length; i += 1) {
+    if (char === firstChars[i]) {
+      return i;
+    }
+  }
+  return -1;
+}
+function noopSelection() {
+  return false;
+}
+const HvVerticalNavigationTreeView = forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    className,
+    classes,
+    mode = "treeview",
+    collapsible = false,
+    expanded: expandedProp,
+    defaultExpanded = [],
+    onToggle,
+    selectable = false,
+    multiSelect: multiSelectProp = false,
+    selected: selectedProp,
+    defaultSelected = [],
+    onChange,
+    disabledItemsFocusable = false,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    children,
+    ...others
+  } = props;
+  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];
+      if (node.disabled) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const isFocused = useCallback((id) => focusedNodeId === id, [focusedNodeId]);
+  const isChildSelected = useCallback((id) => selected.startsWith(id), [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;
+        }
+      }
+      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) => {
+    var _a;
+    if (id) {
+      setFocusedNodeId(id);
+      if ((_a = nodeMap.current[id]) == null ? void 0 : _a.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);
+      }
+    });
+    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 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) => {
+        var _a;
+        return (_a = nodeMap.current[id]) == null ? void 0 : _a.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) => {
+        var _a;
+        return (_a = nodeMap.current[id]) == null ? void 0 : _a.payload;
+      }));
+    }
+    setSelectedState(newSelected);
+  }, [getNodesInRange, isDisabled, onChange, selected, setSelectedState]);
+  const handleMultipleSelect = useCallback((event, value) => {
+    let newSelected;
+    if (selected.indexOf(value) !== -1) {
+      newSelected = selected.filter((id) => id !== value);
+    } else {
+      newSelected = [value].concat(selected);
+    }
+    if (onChange) {
+      onChange(event, newSelected, newSelected.map((id) => {
+        var _a;
+        return (_a = nodeMap.current[id]) == null ? void 0 : _a.payload;
+      }));
+    }
+    setSelectedState(newSelected);
+  }, [onChange, selected, setSelectedState]);
+  const handleSingleSelect = useCallback((event, value) => {
+    var _a;
+    const newSelected = multiSelect ? [value] : value;
+    if (onChange) {
+      const nodeValue = (_a = nodeMap.current[newSelected]) == null ? void 0 : _a.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,
+      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
+    };
+    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)) {
+            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);
+    }
+  };
+  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(StyledRoot, {
+          ref: handleRef,
+          id: idProp,
+          className: clsx(treeViewClasses.root, classes == null ? void 0 : 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
+};
+//# sourceMappingURL=TreeView.js.map