@hitachivantara/uikit-react-core 5.102.1 → 5.104.0

package/dist/cjs/packages/core/src/TreeView/internals/hooks/plugins/useTreeViewKeyboardNavigation.cjs

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const styles = require("@mui/material/styles");
+const utils = require("@mui/material/utils");
+const utils$1 = require("../utils.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const a__namespace = /* @__PURE__ */ _interopNamespace(a);
+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;
+}
+const useTreeViewKeyboardNavigation = ({ instance, params, state }) => {
+  const theme = styles.useTheme();
+  const isRtl = theme.direction === "rtl";
+  const firstCharMap = a__namespace.useRef({});
+  const mapFirstChar = utils.useEventCallback((nodeId, firstChar) => {
+    firstCharMap.current[nodeId] = firstChar;
+    return () => {
+      const newMap = { ...firstCharMap.current };
+      delete newMap[nodeId];
+      firstCharMap.current = newMap;
+    };
+  });
+  utils$1.populateInstance(instance, {
+    mapFirstChar
+  });
+  const handleNextArrow = (event) => {
+    if (state.focusedNodeId != null && instance.isNodeExpandable(state.focusedNodeId)) {
+      if (instance.isNodeExpanded(state.focusedNodeId)) {
+        instance.focusNode(event, utils$1.getNextNode(instance, state.focusedNodeId));
+      } else if (!instance.isNodeDisabled(state.focusedNodeId)) {
+        instance.toggleNodeExpansion(event, state.focusedNodeId);
+      }
+    }
+    return true;
+  };
+  const handlePreviousArrow = (event) => {
+    if (state.focusedNodeId == null) {
+      return false;
+    }
+    if (instance.isNodeExpanded(state.focusedNodeId) && !instance.isNodeDisabled(state.focusedNodeId)) {
+      instance.toggleNodeExpansion(event, state.focusedNodeId);
+      return true;
+    }
+    const parent = instance.getNode(state.focusedNodeId).parentId;
+    if (parent) {
+      instance.focusNode(event, parent);
+      return true;
+    }
+    return false;
+  };
+  const focusByFirstCharacter = (event, nodeId, firstChar) => {
+    let start;
+    let index;
+    const lowercaseChar = firstChar.toLowerCase();
+    const firstCharIds = [];
+    const firstChars = [];
+    Object.keys(firstCharMap.current).forEach((mapNodeId) => {
+      const map = instance.getNode(mapNodeId);
+      const visible = map.parentId ? instance.isNodeExpanded(map.parentId) : true;
+      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isNodeDisabled(mapNodeId);
+      if (visible && !shouldBeSkipped) {
+        firstCharIds.push(mapNodeId);
+        firstChars.push(firstCharMap.current[mapNodeId]);
+      }
+    });
+    start = firstCharIds.indexOf(nodeId) + 1;
+    if (start >= firstCharIds.length) {
+      start = 0;
+    }
+    index = findNextFirstChar(firstChars, start, lowercaseChar);
+    if (index === -1) {
+      index = findNextFirstChar(firstChars, 0, lowercaseChar);
+    }
+    if (index > -1) {
+      instance.focusNode(event, firstCharIds[index]);
+    }
+  };
+  const selectNextNode = (event, id) => {
+    if (!instance.isNodeDisabled(utils$1.getNextNode(instance, id))) {
+      instance.selectRange(
+        event,
+        {
+          end: utils$1.getNextNode(instance, id),
+          current: id
+        },
+        true
+      );
+    }
+  };
+  const selectPreviousNode = (event, nodeId) => {
+    if (!instance.isNodeDisabled(utils$1.getPreviousNode(instance, nodeId))) {
+      instance.selectRange(
+        event,
+        {
+          end: utils$1.getPreviousNode(instance, nodeId),
+          current: nodeId
+        },
+        true
+      );
+    }
+  };
+  const createHandleKeyDown = (otherHandlers) => (event) => {
+    otherHandlers.onKeyDown?.(event);
+    let flag = false;
+    const { key } = event;
+    if (event.altKey || event.currentTarget !== event.target || state.focusedNodeId == null) {
+      return;
+    }
+    const ctrlPressed = event.ctrlKey || event.metaKey;
+    switch (key) {
+      case " ":
+        if (!params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
+          flag = true;
+          if (params.multiSelect && event.shiftKey) {
+            instance.selectRange(event, { end: state.focusedNodeId });
+          } else if (params.multiSelect) {
+            instance.selectNode(event, state.focusedNodeId, true);
+          } else {
+            instance.selectNode(event, state.focusedNodeId);
+          }
+        }
+        event.stopPropagation();
+        break;
+      case "Enter":
+        if (!instance.isNodeDisabled(state.focusedNodeId)) {
+          if (instance.isNodeExpandable(state.focusedNodeId)) {
+            instance.toggleNodeExpansion(event, state.focusedNodeId);
+            flag = true;
+          } else if (!params.disableSelection) {
+            flag = true;
+            if (params.multiSelect) {
+              instance.selectNode(event, state.focusedNodeId, true);
+            } else {
+              instance.selectNode(event, state.focusedNodeId);
+            }
+          }
+        }
+        event.stopPropagation();
+        break;
+      case "ArrowDown":
+        if (params.multiSelect && event.shiftKey && !params.disableSelection) {
+          selectNextNode(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, utils$1.getNextNode(instance, state.focusedNodeId));
+        flag = true;
+        break;
+      case "ArrowUp":
+        if (params.multiSelect && event.shiftKey && !params.disableSelection) {
+          selectPreviousNode(event, state.focusedNodeId);
+        }
+        instance.focusNode(
+          event,
+          utils$1.getPreviousNode(instance, state.focusedNodeId)
+        );
+        flag = true;
+        break;
+      case "ArrowRight":
+        if (isRtl) {
+          flag = handlePreviousArrow(event);
+        } else {
+          flag = handleNextArrow(event);
+        }
+        break;
+      case "ArrowLeft":
+        if (isRtl) {
+          flag = handleNextArrow(event);
+        } else {
+          flag = handlePreviousArrow(event);
+        }
+        break;
+      case "Home":
+        if (params.multiSelect && ctrlPressed && event.shiftKey && !params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
+          instance.rangeSelectToFirst(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, utils$1.getFirstNode(instance));
+        flag = true;
+        break;
+      case "End":
+        if (params.multiSelect && ctrlPressed && event.shiftKey && !params.disableSelection && !instance.isNodeDisabled(state.focusedNodeId)) {
+          instance.rangeSelectToLast(event, state.focusedNodeId);
+        }
+        instance.focusNode(event, utils$1.getLastNode(instance));
+        flag = true;
+        break;
+      default:
+        if (key === "*") {
+          instance.expandAllSiblings(event, state.focusedNodeId);
+          flag = true;
+        } else if (params.multiSelect && ctrlPressed && key.toLowerCase() === "a" && !params.disableSelection) {
+          instance.selectRange(event, {
+            start: utils$1.getFirstNode(instance),
+            end: utils$1.getLastNode(instance)
+          });
+          flag = true;
+        } else if (!ctrlPressed && !event.shiftKey && isPrintableCharacter(key)) {
+          focusByFirstCharacter(event, state.focusedNodeId, key);
+          flag = true;
+        }
+    }
+    if (flag) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  return {
+    getRootProps: (otherHandlers) => ({
+      onKeyDown: createHandleKeyDown(otherHandlers)
+    })
+  };
+};
+exports.useTreeViewKeyboardNavigation = useTreeViewKeyboardNavigation;

package/dist/cjs/packages/core/src/TreeView/internals/hooks/plugins/useTreeViewNodes.cjs

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const utils = require("@mui/material/utils");
+const publishTreeViewEvent = require("../../utils/publishTreeViewEvent.cjs");
+const utils$1 = require("../utils.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const a__namespace = /* @__PURE__ */ _interopNamespace(a);
+const useTreeViewNodes = ({
+  instance,
+  params
+}) => {
+  const nodeMap = a__namespace.useRef({});
+  const getNode = a__namespace.useCallback(
+    (nodeId) => nodeMap.current[nodeId],
+    []
+  );
+  const insertNode = a__namespace.useCallback((node) => {
+    nodeMap.current[node.id] = node;
+  }, []);
+  const removeNode = a__namespace.useCallback(
+    (nodeId) => {
+      const newMap = { ...nodeMap.current };
+      delete newMap[nodeId];
+      nodeMap.current = newMap;
+      publishTreeViewEvent.publishTreeViewEvent(instance, "removeNode", { id: nodeId });
+    },
+    [instance]
+  );
+  const isNodeDisabled = a__namespace.useCallback(
+    (nodeId) => {
+      if (nodeId == null) {
+        return false;
+      }
+      let node = instance.getNode(nodeId);
+      if (!node) {
+        return false;
+      }
+      if (node.disabled) {
+        return true;
+      }
+      while (node.parentId != null) {
+        node = instance.getNode(node.parentId);
+        if (node.disabled) {
+          return true;
+        }
+      }
+      return false;
+    },
+    [instance]
+  );
+  const getChildrenIds = utils.useEventCallback(
+    (nodeId) => Object.values(nodeMap.current).filter((node) => node.parentId === nodeId).sort((a2, b) => a2.index - b.index).map((child) => child.id)
+  );
+  const getNavigableChildrenIds = (nodeId) => {
+    let childrenIds = instance.getChildrenIds(nodeId);
+    if (!params.disabledItemsFocusable) {
+      childrenIds = childrenIds.filter(
+        (node) => !instance.isNodeDisabled(node)
+      );
+    }
+    return childrenIds;
+  };
+  utils$1.populateInstance(instance, {
+    getNode,
+    updateNode: insertNode,
+    removeNode,
+    getChildrenIds,
+    getNavigableChildrenIds,
+    isNodeDisabled
+  });
+};
+exports.useTreeViewNodes = useTreeViewNodes;

package/dist/cjs/packages/core/src/TreeView/internals/hooks/plugins/useTreeViewSelection.cjs

@@ -0,0 +1,218 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const utils = require("../utils.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const a__namespace = /* @__PURE__ */ _interopNamespace(a);
+const findOrderInTremauxTree = (instance, nodeAId, nodeBId) => {
+  if (nodeAId === nodeBId) {
+    return [nodeAId, nodeBId];
+  }
+  const nodeA = instance.getNode(nodeAId);
+  const nodeB = instance.getNode(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 = instance.getNode(aAncestor).parentId;
+      }
+    }
+    if (continueB && !aAncestorIsCommon) {
+      bFamily.push(bAncestor);
+      bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
+      continueB = bAncestor !== null;
+      if (!bAncestorIsCommon && continueB) {
+        bAncestor = instance.getNode(bAncestor).parentId;
+      }
+    }
+  }
+  const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
+  const ancestorFamily = instance.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 useTreeViewSelection = ({ instance, params, models }) => {
+  const lastSelectedNode = a__namespace.useRef(null);
+  const lastSelectionWasRange = a__namespace.useRef(false);
+  const currentRangeSelection = a__namespace.useRef([]);
+  const isNodeSelected = (nodeId) => Array.isArray(models.selected.value) ? models.selected.value.indexOf(nodeId) !== -1 : models.selected.value === nodeId;
+  const selectNode = (event, nodeId, multiple = false) => {
+    if (params.disableSelection) {
+      return;
+    }
+    if (multiple) {
+      if (Array.isArray(models.selected.value)) {
+        let newSelected;
+        if (models.selected.value.indexOf(nodeId) !== -1) {
+          newSelected = models.selected.value.filter((id) => id !== nodeId);
+        } else {
+          newSelected = [nodeId].concat(models.selected.value);
+        }
+        if (params.onNodeSelect) {
+          params.onNodeSelect(
+            event,
+            newSelected
+          );
+        }
+        models.selected.setValue(newSelected);
+      }
+    } else {
+      const newSelected = params.multiSelect ? [nodeId] : nodeId;
+      if (params.onNodeSelect) {
+        params.onNodeSelect(event, newSelected);
+      }
+      models.selected.setValue(newSelected);
+    }
+    lastSelectedNode.current = nodeId;
+    lastSelectionWasRange.current = false;
+    currentRangeSelection.current = [];
+  };
+  const getNodesInRange = (nodeAId, nodeBId) => {
+    const [first, last] = findOrderInTremauxTree(instance, nodeAId, nodeBId);
+    const nodes = [first];
+    let current = first;
+    while (current !== last) {
+      current = utils.getNextNode(instance, current);
+      nodes.push(current);
+    }
+    return nodes;
+  };
+  const handleRangeArrowSelect = (event, nodes) => {
+    let base = models.selected.value.slice();
+    const { start, next, current } = nodes;
+    if (!next || !current) {
+      return;
+    }
+    if (currentRangeSelection.current.indexOf(current) === -1) {
+      currentRangeSelection.current = [];
+    }
+    if (lastSelectionWasRange.current) {
+      if (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 (params.onNodeSelect) {
+      params.onNodeSelect(
+        event,
+        base
+      );
+    }
+    models.selected.setValue(base);
+  };
+  const handleRangeSelect = (event, nodes) => {
+    let base = models.selected.value.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) => !instance.isNodeDisabled(node));
+    currentRangeSelection.current = range;
+    let newSelected = base.concat(range);
+    newSelected = newSelected.filter((id, i) => newSelected.indexOf(id) === i);
+    if (params.onNodeSelect) {
+      params.onNodeSelect(
+        event,
+        newSelected
+      );
+    }
+    models.selected.setValue(newSelected);
+  };
+  const selectRange = (event, nodes, stacked = false) => {
+    if (params.disableSelection) {
+      return;
+    }
+    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;
+  };
+  const rangeSelectToFirst = (event, nodeId) => {
+    if (!lastSelectedNode.current) {
+      lastSelectedNode.current = nodeId;
+    }
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    instance.selectRange(event, {
+      start,
+      end: utils.getFirstNode(instance)
+    });
+  };
+  const rangeSelectToLast = (event, nodeId) => {
+    if (!lastSelectedNode.current) {
+      lastSelectedNode.current = nodeId;
+    }
+    const start = lastSelectionWasRange.current ? lastSelectedNode.current : nodeId;
+    instance.selectRange(event, {
+      start,
+      end: utils.getLastNode(instance)
+    });
+  };
+  utils.populateInstance(instance, {
+    isNodeSelected,
+    selectNode,
+    selectRange,
+    rangeSelectToLast,
+    rangeSelectToFirst
+  });
+  return {
+    getRootProps: () => ({
+      "aria-multiselectable": params.multiSelect
+    })
+  };
+};
+useTreeViewSelection.models = {
+  selected: { controlledProp: "selected", defaultProp: "defaultSelected" }
+};
+const DEFAULT_SELECTED = [];
+useTreeViewSelection.getDefaultizedParams = (params) => ({
+  ...params,
+  disableSelection: params.disableSelection ?? false,
+  multiSelect: params.multiSelect ?? false,
+  defaultSelected: params.defaultSelected ?? (params.multiSelect ? DEFAULT_SELECTED : null)
+});
+exports.findOrderInTremauxTree = findOrderInTremauxTree;
+exports.useTreeViewSelection = useTreeViewSelection;

package/dist/cjs/packages/core/src/TreeView/internals/hooks/useInstanceEventHandler.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const FinalizationRegistryBasedCleanupTracking = require("../utils/FinalizationRegistryBasedCleanupTracking.cjs");
+const TimerBasedCleanupTracking = require("../utils/TimerBasedCleanupTracking.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const a__namespace = /* @__PURE__ */ _interopNamespace(a);
+class ObjectToBeRetainedByReact {
+}
+function createUseInstanceEventHandler(registryContainer2) {
+  let cleanupTokensCounter = 0;
+  return function useInstanceEventHandler2(instance, eventName, handler) {
+    if (registryContainer2.registry === null) {
+      registryContainer2.registry = typeof FinalizationRegistry !== "undefined" ? new FinalizationRegistryBasedCleanupTracking.FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking.TimerBasedCleanupTracking();
+    }
+    const [objectRetainedByReact] = a__namespace.useState(
+      new ObjectToBeRetainedByReact()
+    );
+    const subscription = a__namespace.useRef(null);
+    const handlerRef = a__namespace.useRef(void 0);
+    handlerRef.current = handler;
+    const cleanupTokenRef = a__namespace.useRef(null);
+    if (!subscription.current && handlerRef.current) {
+      const enhancedHandler = (params, event) => {
+        if (!event.defaultMuiPrevented) {
+          handlerRef.current?.(params, event);
+        }
+      };
+      subscription.current = instance.$$subscribeEvent(
+        eventName,
+        enhancedHandler
+      );
+      cleanupTokensCounter += 1;
+      cleanupTokenRef.current = { cleanupToken: cleanupTokensCounter };
+      registryContainer2.registry.register(
+        objectRetainedByReact,
+        // The callback below will be called once this reference stops being retained
+        () => {
+          subscription.current?.();
+          subscription.current = null;
+          cleanupTokenRef.current = null;
+        },
+        cleanupTokenRef.current
+      );
+    } else if (!handlerRef.current && subscription.current) {
+      subscription.current();
+      subscription.current = null;
+      if (cleanupTokenRef.current) {
+        registryContainer2.registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+    }
+    a__namespace.useEffect(() => {
+      if (!subscription.current && handlerRef.current) {
+        const enhancedHandler = (params, event) => {
+          if (!event.defaultMuiPrevented) {
+            handlerRef.current?.(params, event);
+          }
+        };
+        subscription.current = instance.$$subscribeEvent(
+          eventName,
+          enhancedHandler
+        );
+      }
+      if (cleanupTokenRef.current && registryContainer2.registry) {
+        registryContainer2.registry.unregister(cleanupTokenRef.current);
+        cleanupTokenRef.current = null;
+      }
+      return () => {
+        subscription.current?.();
+        subscription.current = null;
+      };
+    }, [instance, eventName]);
+  };
+}
+const registryContainer = { registry: null };
+const useInstanceEventHandler = createUseInstanceEventHandler(registryContainer);
+exports.createUseInstanceEventHandler = createUseInstanceEventHandler;
+exports.useInstanceEventHandler = useInstanceEventHandler;