@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/VerticalNavigation/TreeView/TreeView.mjs

@@ -1,704 +0,0 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useRef, useState, useCallback, useMemo } from "react";
-import { useControlled } from "../../hooks/useControlled.mjs";
-import { useUniqueId } from "../../hooks/useUniqueId.mjs";
-import { useForkRef } from "../../hooks/useForkRef.mjs";
-import { TreeViewControlContext, TreeViewStateContext } from "./TreeViewContext.mjs";
-import { DescendantProvider } from "./descendants.mjs";
-import { useClasses } from "./TreeView.styles.mjs";
-import { staticClasses } from "./TreeView.styles.mjs";
-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: 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];
-        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;
-            }
-          }
-          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);
-        }
-      }
-    };
-    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) => 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,
-        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(
-      "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
-};
-//# sourceMappingURL=TreeView.mjs.map