@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/es/BaseDiagram-19f481a0.js

@@ -0,0 +1,2954 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { T as TrackResizeContainer } from './TrackResizeContainer-3d7b18b7.js';
+import { labelStyles, buttonStyle, layerStyles, itemStyles, linkLayerStyle, panZoomStyles, outerStyles, dimensionStyle } from './PRIVATE_BaseDiagram/themes/DiagramStyles.css.js';
+import { u as useResizeObserver } from './useResizeObserver-13641643.js';
+import { useRef, useCallback, useState, useLayoutEffect } from 'preact/hooks';
+import { g as generateAriaLabel } from './accUtils-9d5183c4.js';
+import { c as containsKey, r as removeKey, a as addKey } from './keys-49c92dbb.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { u as useUser } from './useUser-e543b73c.js';
+import { E as EmbeddedIconButton } from './EmbeddedIconButton-9f0e56b7.js';
+import { S as SvgPlus } from './Plus-b62e474b.js';
+import { S as SvgMinus } from './Minus-6bd44b40.js';
+import { g as getRandomId, c as calculateOffset } from './layoutUtils-ec5be703.js';
+import { u as useVisHover } from './useVisHover-d7a0b2f3.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { u as useDatatip } from './useDatatip-ef5c47a7.js';
+import { u as useTextDimensions } from './useTextDimensions-45f79df4.js';
+import { i as isTouch } from './clientUtils-cccff45f.js';
+import { u as useVisDragModeControls } from './useVisDragModeControls-6865056f.js';
+import { u as useSelection } from './useSelection-10ed8060.js';
+import { u as useVisTouchResponse } from './useVisTouchResponse-a59ab166.js';
+import { l } from './stringUtils-0fe25200.js';
+import { u as useContextMenu } from './useContextMenu-8a1230a3.js';
+import './SelectMenuGroupContext-130a850c.js';
+import 'preact';
+import './logger-c92f309c.js';
+import './LayerHost-3cf255a6.js';
+import 'preact/compat';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-90fb656f.js';
+import './IconStyle.styles.css';
+import './UNSAFE_Menu/themes/MenuItemStyles.css.js';
+import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
+import './MenuSeparatorStyles.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorBaseTheme.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js';
+import './MenuStyles.styles.css';
+
+/**
+ * Constructs the json object to be passed into the layout function
+ */
+function constructLayoutJSON(nodeItems, linkItems, promotedLinks, dimensions, width, height, zoom, nodeIdToParentMap, rootRef, getTextDimensions) {
+    const labelDims = new Map();
+    const nodeValues = Array.from(nodeItems.values());
+    const linkValues = Array.from(linkItems.values());
+    if (getTextDimensions) {
+        getLabelProps(nodeValues, linkValues, labelDims, getTextDimensions);
+    }
+    const linkKeys = Array.from(linkItems.keys());
+    for (const id of linkKeys) {
+        const item = linkItems.get(id);
+        if (item && getTextDimensions && item.label) {
+            const label = item.label;
+            const fontProps = _getFontProps(item.labelStyle);
+            labelDims.set(id, getTextDimensions(label, fontProps));
+        }
+    }
+    const getLabelDimensions = function (data) {
+        return labelDims.get(data.id);
+    };
+    const getNodeDimensions = function (data) {
+        return dimensions.get(data.id);
+    };
+    const getRelativeNodeBounds = function (id, containerId) {
+        const absPos = getAbsoluteNodePosition(id, containerId, rootRef);
+        if (absPos) {
+            return {
+                x: absPos.x / zoom,
+                y: absPos.y / zoom,
+                width: absPos.width / zoom,
+                height: absPos.height / zoom
+            };
+        }
+        else {
+            return undefined;
+        }
+    };
+    const getContainerId = function (startNode, endNode) {
+        return getCommonAncestorId(startNode, endNode, nodeIdToParentMap);
+    };
+    const getPromotedLinks = function () {
+        return promotedLinks;
+    };
+    return {
+        layoutJSON: {
+            getNodeDimensions: getNodeDimensions,
+            getLabelDimensions: getLabelDimensions,
+            getContainerId,
+            getRelativeNodeBounds,
+            getPromotedLinks,
+            componentSize: {
+                width: width,
+                height: height
+            }
+        },
+        labelDims: labelDims
+    };
+}
+function normalizeBounds(bounds, zoom) {
+    return {
+        x: bounds.x / zoom,
+        y: bounds.y / zoom,
+        width: bounds.width / zoom,
+        height: bounds.height / zoom
+    };
+}
+function getAbsoluteLinkBounds(itemId, referenceId, bounds, zoom, rootRef, isPromoted) {
+    if (rootRef && rootRef.current) {
+        let linkElement;
+        if (isPromoted) {
+            const id = `${itemId.startNode}_${itemId.endNode}`;
+            linkElement = rootRef.current.querySelector(`[data-oj-private-promoted-link=${id}]`);
+        }
+        else {
+            linkElement = rootRef.current.querySelector(`[data-oj-private-link=${itemId}]`);
+        }
+        let nodeContainer;
+        if (referenceId) {
+            nodeContainer = rootRef.current.querySelector(`[data-oj-private-node=${referenceId}]`);
+        }
+        const dims = bounds.get(itemId);
+        if (linkElement && nodeContainer && dims) {
+            const linkBoundingRect = normalizeBounds(linkElement.getBoundingClientRect(), zoom);
+            const diagramBoundingRect = normalizeBounds(nodeContainer.getBoundingClientRect(), zoom);
+            return {
+                x: linkBoundingRect.x - diagramBoundingRect.x,
+                y: linkBoundingRect.y - diagramBoundingRect.y,
+                width: dims.width,
+                height: dims.height
+            };
+        }
+    }
+    return null;
+}
+function getBounds(nodes, links, promotedLinks, nodeBounds, linkDimensions, promotedLinkDimensions, zoom, rootRef) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let id;
+    let topId;
+    let leftId;
+    for (let i = 0; i < nodes.length; i++) {
+        id = nodes[i].id;
+        const bounds = nodeBounds.get(id);
+        if (bounds) {
+            if (minX > bounds.x) {
+                minX = bounds.x;
+                leftId = id;
+            }
+            if (minY > bounds.y) {
+                minY = bounds.y;
+                topId = id;
+            }
+            if (maxX < bounds.x + bounds.width) {
+                maxX = bounds.x + bounds.width;
+            }
+            if (maxY < bounds.y + bounds.height) {
+                maxY = bounds.y + bounds.height;
+            }
+        }
+    }
+    const nodeMinX = minX;
+    const nodeMinY = minY;
+    let linkMinX = 0;
+    let linkMinY = 0;
+    let linkMaxX = maxX - minX;
+    let linkMaxY = maxY - minY;
+    for (let i = 0; i < links.length; i++) {
+        id = links[i].id;
+        //Top and left bounds are relative to the current most top and left nodes
+        const topBounds = getAbsoluteLinkBounds(id, topId, linkDimensions, zoom, rootRef);
+        const leftBounds = getAbsoluteLinkBounds(id, leftId, linkDimensions, zoom, rootRef);
+        if (leftBounds) {
+            if (leftBounds.x < linkMinX) {
+                linkMinX = leftBounds.x;
+            }
+            if (linkMaxX < leftBounds.x + leftBounds.width) {
+                linkMaxX = leftBounds.x + leftBounds.width;
+            }
+        }
+        if (topBounds) {
+            if (topBounds.y < linkMinY) {
+                linkMinY = topBounds.y;
+            }
+            if (linkMaxY < topBounds.y + topBounds.height) {
+                linkMaxY = topBounds.y + topBounds.height;
+            }
+        }
+    }
+    for (let i = 0; i < promotedLinks.length; i++) {
+        id = promotedLinks[i];
+        //Top and left bounds are relative to the current most top and left nodes
+        const topBounds = getAbsoluteLinkBounds(id, topId, promotedLinkDimensions, zoom, rootRef, true);
+        const leftBounds = getAbsoluteLinkBounds(id, leftId, promotedLinkDimensions, zoom, rootRef, true);
+        if (leftBounds) {
+            if (leftBounds.x < linkMinX) {
+                linkMinX = leftBounds.x;
+            }
+            if (linkMaxX < leftBounds.x + leftBounds.width) {
+                linkMaxX = leftBounds.x + leftBounds.width;
+            }
+        }
+        if (topBounds) {
+            if (topBounds.y < linkMinY) {
+                linkMinY = topBounds.y;
+            }
+            if (linkMaxY < topBounds.y + topBounds.height) {
+                linkMaxY = topBounds.y + topBounds.height;
+            }
+        }
+    }
+    return {
+        minX: nodeMinX,
+        minY: nodeMinY,
+        contentWidth: maxX - minX,
+        contentHeight: maxY - minY,
+        bounds: { x: linkMinX, y: linkMinY, width: linkMaxX - linkMinX, height: linkMaxY - linkMinY }
+    };
+}
+function getAbsoluteNodePosition(nodeId, containerId, rootRef) {
+    if (rootRef && rootRef.current) {
+        const nodeElement = rootRef.current.querySelector(`[data-oj-private-node=${nodeId}]`);
+        let nodeContainer;
+        if (containerId) {
+            nodeContainer = rootRef.current.querySelector(`[data-oj-private-child=${containerId}]`);
+        }
+        else {
+            nodeContainer = rootRef.current.querySelector('[data-oj-private-node-container]');
+        }
+        if (nodeElement && nodeContainer) {
+            const nodeBoundingRect = nodeElement.getBoundingClientRect();
+            const nodeContainerRect = nodeContainer.getBoundingClientRect();
+            return {
+                x: nodeBoundingRect.x - nodeContainerRect.x,
+                y: nodeBoundingRect.y - nodeContainerRect.y,
+                width: nodeBoundingRect.width,
+                height: nodeBoundingRect.height
+            };
+        }
+    }
+    return null;
+}
+function getLabelProps(nodeItems, linkItems, labelDims, getTextDimensions) {
+    nodeItems.forEach((value) => {
+        if (value.nodes) {
+            getNodeLabelProps(value.nodes, labelDims, getTextDimensions);
+        }
+        if (value.label) {
+            const label = value.label;
+            const fontProps = _getFontProps(value.labelStyle);
+            labelDims.set(value.id, getTextDimensions(label, fontProps));
+        }
+    });
+    linkItems.forEach((value) => {
+        if (value.label) {
+            const label = value.label;
+            const fontProps = _getFontProps(value.labelStyle);
+            labelDims.set(value.id, getTextDimensions(label, fontProps));
+        }
+    });
+}
+function getNodeLabelProps(nodeItems, labelDims, getTextDimensions) {
+    nodeItems.forEach((value) => {
+        if (value.nodes) {
+            getNodeLabelProps(value.nodes, labelDims, getTextDimensions);
+        }
+        if (value.label) {
+            const label = value.label;
+            const fontProps = _getFontProps(value.labelStyle);
+            labelDims.set(value.id, getTextDimensions(label, fontProps));
+        }
+    });
+}
+/**
+ * Deconstructs the output of the layout function
+ */
+function deconstructLayoutJSON(layoutJSON, nodeData, linkData) {
+    const positions = new Map();
+    const nodeLabelPos = new Map();
+    const linkLabelPos = new Map();
+    findPoints(layoutJSON, nodeData, positions, nodeLabelPos);
+    const links = layoutJSON.links;
+    let link;
+    if (links) {
+        for (let i = 0; i < linkData.length; i++) {
+            link = links[linkData[i].id];
+            if (link && link.label)
+                linkLabelPos.set(linkData[i].id, link.label);
+        }
+    }
+    return {
+        nodePoints: positions,
+        nodeLabelPos: nodeLabelPos,
+        linkLabelPos: linkLabelPos
+    };
+}
+function findPoints(output, nodeData, positions, nodeLabelPos) {
+    const nodes = output.nodes;
+    let node;
+    if (nodes) {
+        for (let i = 0; i < nodeData.length; i++) {
+            const data = nodeData[i];
+            const id = data.id;
+            if (data.nodes) {
+                findPoints(output, data.nodes, positions, nodeLabelPos);
+            }
+            node = nodes[id];
+            if (node) {
+                positions.set(id, node.position);
+                if (node.label) {
+                    nodeLabelPos.set(id, node.label);
+                }
+            }
+        }
+    }
+}
+/**
+ * Merges the node points into the dimensions
+ */
+function mergeDimensions(dimensions, nodePoints, rootRef) {
+    const nodeBounds = new Map();
+    const nodeAbsBounds = new Map();
+    dimensions.forEach((value, key) => {
+        const point = nodePoints.get(key);
+        const absPoint = getAbsoluteNodePosition(key, undefined, rootRef);
+        if (point) {
+            nodeBounds.set(key, { x: point.x, y: point.y, width: value.width, height: value.height });
+        }
+        if (absPoint) {
+            nodeAbsBounds.set(key, { x: absPoint.x, y: absPoint.y, width: value.width, height: value.height });
+        }
+    });
+    return { nodeBounds, nodeAbsBounds };
+}
+/**
+ * Deep equality check for whether two arrays of bounds are the same
+ */
+function isEqualBounds(bounds1, bounds2) {
+    if (bounds1.size !== bounds2.size)
+        return false;
+    let equal = true;
+    bounds1.forEach((value, key) => {
+        const b2Value = bounds2.get(key);
+        if (!b2Value)
+            equal = false;
+        else if (Math.abs(value.x - b2Value.x) > 0.5 ||
+            Math.abs(value.y - b2Value.y) > 0.5 ||
+            Math.abs(value.width - b2Value.width) > 0.5 ||
+            Math.abs(value.height - b2Value.height) > 0.5)
+            equal = false;
+    });
+    return equal;
+}
+/**
+ * Returns the text for the diagram datatip.
+ */
+function getDatatipContent(nodesMap, linksMap, focusedItem, hoveredItem, datatip) {
+    let itemInfo;
+    const isPointerActive = hoveredItem?.isCurrent;
+    if (isPointerActive && hoveredItem.id != null) {
+        itemInfo = hoveredItem;
+    }
+    if (focusedItem && focusedItem.isCurrent) {
+        itemInfo = focusedItem;
+    }
+    if (itemInfo && datatip) {
+        let context;
+        switch (itemInfo.type) {
+            case 'node': {
+                context = { data: nodesMap.get(itemInfo.id), type: 'node' };
+                break;
+            }
+            case 'link': {
+                context = { data: linksMap.get(itemInfo.id), type: 'link' };
+                break;
+            }
+            default: {
+                context = { id: itemInfo.id, type: 'promotedLink' };
+            }
+        }
+        return datatip(context);
+    }
+    if (itemInfo) {
+        const text = (itemInfo.type === 'node' ? nodesMap.get(itemInfo.id) : linksMap.get(itemInfo.id))?.accessibleLabel;
+        return {
+            content: text
+        };
+    }
+    return;
+}
+/**
+ * Creates a map with key id and value node or link data
+ */
+function createLinksMap(items) {
+    const itemIdToDataMap = new Map();
+    const itemIdToIndexMap = new Map();
+    const itemIndexToIdMap = new Map();
+    const itemIdToParentMap = new Map();
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        itemIdToDataMap.set(item.id, item);
+        itemIdToIndexMap.set(item.id, i);
+        itemIndexToIdMap.set(i, item.id);
+    }
+    return {
+        itemIdToDataMap,
+        itemIdToIndexMap,
+        itemIndexToIdMap,
+        itemIdToParentMap
+    };
+}
+/**
+ * Creates a map with key id and value node or link data
+ */
+function createPromotedLinksMap(items) {
+    const promotedLinkMap = new Map();
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        promotedLinkMap.set(`${item.startNode}_${item.endNode}`, item);
+    }
+    return promotedLinkMap;
+}
+/**
+ * Creates a map with key id and value node or link data
+ */
+function createNodesMap(items, expanded) {
+    const itemIdToDataMap = new Map();
+    const itemIdToIndexMap = new Map();
+    const itemIndexToIdMap = new Map();
+    const itemIdToParentMap = new Map();
+    const allContainerNodes = [];
+    const allVisibleNodes = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const index = String(i);
+        itemIdToDataMap.set(item.id, item);
+        itemIdToIndexMap.set(item.id, index);
+        itemIndexToIdMap.set(index, item.id);
+        allVisibleNodes.push(item.id);
+        if (item.nodes) {
+            allContainerNodes.push(item);
+            if (containsKey(expanded, item.id)) {
+                _createItemMap(item.nodes, itemIdToDataMap, itemIdToIndexMap, itemIndexToIdMap, itemIdToParentMap, allContainerNodes, expanded, allVisibleNodes, item.id, String(i));
+            }
+        }
+    }
+    return {
+        itemIdToDataMap,
+        itemIdToIndexMap,
+        itemIndexToIdMap,
+        itemIdToParentMap,
+        allContainerNodes,
+        allVisibleNodes
+    };
+}
+function _createItemMap(items, itemIdToDataMap, itemIdToIndexMap, itemIndexToIdMap, itemIdToParentMap, allContainerNodes, expanded, allVisibleNodes, parentId, parentIndex) {
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const index = `${parentIndex}_${i}`;
+        itemIdToDataMap.set(item.id, item);
+        itemIdToIndexMap.set(item.id, index);
+        itemIndexToIdMap.set(index, item.id);
+        itemIdToParentMap.set(item.id, parentId);
+        allVisibleNodes.push(item.id);
+        if (item.nodes) {
+            allContainerNodes.push(item);
+            if (containsKey(expanded, item.id)) {
+                _createItemMap(item.nodes, itemIdToDataMap, itemIdToIndexMap, itemIndexToIdMap, itemIdToParentMap, allContainerNodes, expanded, allVisibleNodes, item.id, index);
+            }
+        }
+    }
+}
+/**
+ * Filter out links with no start or end nodes
+ */
+function filterLinksWithNoStartOrEndNodes(links, nodesMap) {
+    const newLinks = [];
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        if (nodesMap.get(link.startNode) && nodesMap.get(link.endNode)) {
+            newLinks.push(link);
+        }
+    }
+    return newLinks;
+}
+/**
+ * Pulls out the dimensions from an array of bounds
+ */
+function getDimensionsFromBounds(bounds) {
+    const dims = new Map();
+    bounds.forEach((value, key) => {
+        dims.set(key, { width: value.width, height: value.height });
+    });
+    return dims;
+}
+/**
+ * Returns the center position of the node or link
+ * For links, draws a straight line between the centers of the start/end node
+ * and returns the center of that line
+ */
+function getFocusedItemBounds(focusedItemInfo, bounds, links, linkIdToIndexMap, rootRef) {
+    if (focusedItemInfo.type === 'node') {
+        // Return the first element if cannot find the Node index
+        const position = getAbsoluteNodePosition(focusedItemInfo.id, undefined, rootRef);
+        const nodeBounds = bounds.get(focusedItemInfo.id) || bounds.values().next().value;
+        return {
+            x: position ? position.x : nodeBounds.x,
+            y: position ? position.y : nodeBounds.y,
+            width: nodeBounds.width,
+            height: nodeBounds.height
+        };
+    }
+    else {
+        // Center of a straight line between start/end node centers
+        const link = focusedItemInfo.type === 'promotedLink'
+            ? focusedItemInfo.id
+            : links[linkIdToIndexMap.get(focusedItemInfo.id) || 0];
+        const startNB = bounds.get(link.startNode) || bounds.values().next().value;
+        const endNB = bounds.get(link.endNode) || bounds.values().next().value;
+        const startNCenter = {
+            x: startNB.x + startNB.width / 2,
+            y: startNB.y + startNB.height / 2
+        };
+        const endNCenter = { x: endNB.x + endNB.width / 2, y: endNB.y + endNB.height / 2 };
+        const minX = Math.min(startNCenter.x, endNCenter.x);
+        const minY = Math.min(startNCenter.y, endNCenter.y);
+        return {
+            x: minX,
+            y: minY,
+            width: Math.abs(startNCenter.x - endNCenter.x),
+            height: Math.abs(startNCenter.y - endNCenter.y)
+        };
+    }
+}
+/**
+ * Returns the bounds of the diagram content
+ */
+function getContentBounds(nodeBounds, labelBounds) {
+    if (nodeBounds.size === 0)
+        return { x: 0, width: Infinity, y: 0, height: Infinity };
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let dims;
+    nodeBounds.forEach((value) => {
+        dims = value;
+        minX = dims.x < minX ? dims.x : minX;
+        minY = dims.y < minY ? dims.y : minY;
+        maxX = dims.x + dims.width > maxX ? dims.x + dims.width : maxX;
+        maxY = dims.y + dims.height > maxY ? dims.y + dims.height : maxY;
+    });
+    if (labelBounds) {
+        minX = labelBounds.x < minX ? labelBounds.x : minX;
+        minY = labelBounds.y < minY ? labelBounds.y : minY;
+        maxX = labelBounds.x + labelBounds.width > maxX ? labelBounds.x + labelBounds.width : maxX;
+        maxY = labelBounds.y + labelBounds.height > maxY ? labelBounds.y + labelBounds.height : maxY;
+    }
+    return { x: minX, width: maxX - minX, y: minY, height: maxY - minY };
+}
+/**
+ * Returns the label bounds
+ */
+function getAllLabelBounds(labelDims, nodeLabelPos = new Map(), linkLabelPos = new Map(), isRTL, rootRef) {
+    if (nodeLabelPos.size === 0)
+        return undefined;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let dims;
+    let nodeBound;
+    nodeLabelPos.forEach((value, key) => {
+        dims = getLabelBounds(value, labelDims.get(key), isRTL);
+        nodeBound = getAbsoluteNodePosition(key, null, rootRef);
+        if (nodeBound) {
+            minX = dims.x + nodeBound.x < minX ? dims.x + nodeBound.x : minX;
+            minY = dims.y + nodeBound.y < minY ? dims.y + nodeBound.y : minY;
+            maxX = dims.x + dims.width + nodeBound.x > maxX ? dims.x + dims.width + nodeBound.x : maxX;
+            maxY = dims.y + dims.height + nodeBound.y > maxY ? dims.y + dims.height + nodeBound.y : maxY;
+        }
+    });
+    linkLabelPos.forEach((value, key) => {
+        dims = getLabelBounds(value, labelDims.get(key), isRTL);
+        if (dims) {
+            minX = dims.x < minX ? dims.x : minX;
+            minY = dims.y < minY ? dims.y : minY;
+            maxX = dims.x + dims.width > maxX ? dims.x + dims.width : maxX;
+            maxY = dims.y + dims.height > maxY ? dims.y + dims.height : maxY;
+        }
+    });
+    return { x: minX, width: maxX - minX, y: minY, height: maxY - minY };
+}
+function getLabelBounds(label, dims, isRTL) {
+    const labelPos = getLabelPosition(dims, label, isRTL);
+    const isRotating = label.rotationAngle;
+    if (!isRotating) {
+        return { x: labelPos.x, y: labelPos.y, width: dims.width, height: dims.height };
+    }
+    else {
+        // Find the 4 corners of the label bounds relative to the rotation point
+        const rotationPoint = label.rotationPoint
+            ? label.rotationPoint
+            : { x: dims.width / 2, y: dims.height / 2 };
+        const angle = label.rotationAngle;
+        const topLeft = getCoordsRelToRotPoint({ x: 0, y: 0 }, rotationPoint);
+        const topRight = getCoordsRelToRotPoint({ x: dims.width, y: 0 }, rotationPoint);
+        const bottomLeft = getCoordsRelToRotPoint({ x: 0, y: dims.height }, rotationPoint);
+        const bottomRight = getCoordsRelToRotPoint({ x: dims.width, y: dims.height }, rotationPoint);
+        const rotTopLeft = rotatePoint(topLeft, angle);
+        const rotBotLeft = rotatePoint(bottomLeft, angle);
+        const rotTopRight = rotatePoint(topRight, angle);
+        const rotBotRight = rotatePoint(bottomRight, angle);
+        const points = [rotTopLeft, rotBotLeft, rotTopRight, rotBotRight].map((pos) => {
+            return {
+                x: pos.x + labelPos.x + rotationPoint.x,
+                y: pos.y + labelPos.y + rotationPoint.y
+            };
+        });
+        return getBoundsFromPoints(points);
+    }
+}
+function getCoordsRelToRotPoint(labelPoint, rotPoint) {
+    return { x: labelPoint.x - rotPoint.x, y: labelPoint.y - rotPoint.y };
+}
+function rotatePoint(pos, angle) {
+    return {
+        x: pos.x * Math.cos(angle) - pos.y * Math.sin(angle),
+        y: pos.x * Math.sin(angle) + pos.y * Math.cos(angle)
+    };
+}
+function getBoundsFromPoints(points) {
+    let minX = points[0].x;
+    let minY = points[0].y;
+    let maxX = points[0].x;
+    let maxY = points[0].y;
+    for (let i = 1; i < points.length; i++) {
+        const point = points[i];
+        if (point.x < minX)
+            minX = point.x;
+        else if (point.x > maxX)
+            maxX = point.x;
+        if (point.y < minY)
+            minY = point.y;
+        else if (point.y > maxY)
+            maxY = point.y;
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+    };
+}
+/**
+ * Returns the position of the label
+ * @param dimensions
+ * @param positionProps
+ * @returns position of the label
+ */
+function getLabelPosition(dimensions, positionProps, isRTL) {
+    const position = positionProps.position;
+    const hAlign = positionProps.hAlign ? positionProps.hAlign : isRTL ? 'right' : 'left';
+    const vAlign = positionProps.vAlign;
+    let x, y;
+    if (hAlign === 'center') {
+        x = position.x - dimensions.width / 2;
+    }
+    else if (hAlign === 'right') {
+        x = position.x - dimensions.width;
+    }
+    else {
+        x = position.x;
+    }
+    if (vAlign === 'middle') {
+        y = position.y - dimensions.height / 2;
+    }
+    else if (vAlign === 'bottom') {
+        y = position.y - dimensions.height;
+    }
+    else if (vAlign === 'baseline') {
+        y = position.y + dimensions.y;
+    }
+    else {
+        y = position.y;
+    }
+    return {
+        x: x,
+        y: y
+    };
+}
+/**
+ * Compares if two ItemInfo are equal
+ */
+function isEqualItem(item1, item2) {
+    return item1?.id === item2?.id && item1?.type === item2?.type;
+}
+/**
+ * Returns the item info of the data-oj-node or data-oj-link attribute for a given element.
+ */
+function getNavigableInfo(element, promotedLinkMap, rootElementRef) {
+    let type;
+    let elem = element;
+    let navigableId;
+    while (!navigableId) {
+        if (elem.dataset['ojPrivateNode']) {
+            type = 'node';
+            navigableId = elem.dataset['ojPrivateNode'];
+        }
+        else if (elem.dataset['ojPrivateLink']) {
+            navigableId = elem.dataset['ojPrivateLink'];
+            type = 'link';
+        }
+        else if (elem.dataset['ojPrivatePromotedLink']) {
+            navigableId = promotedLinkMap.get(elem.dataset['ojPrivatePromotedLink']);
+            type = 'promotedLink';
+        }
+        if (!navigableId) {
+            if (elem.parentElement && elem.parentElement !== rootElementRef?.current) {
+                elem = elem.parentElement;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return {
+        id: navigableId,
+        type: type
+    };
+}
+/**
+ * Returns the id of the node the expand collapse button belongs to
+ */
+function expCollapseButtonId(element, rootElementRef) {
+    let elem = element;
+    let id;
+    while (!id) {
+        id = elem.dataset['ojPrivateButton'];
+        if (!id) {
+            if (elem.parentElement &&
+                !elem.parentElement.dataset['ojPrivateNode'] &&
+                elem.parentElement !== rootElementRef?.current) {
+                elem = elem.parentElement;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return id;
+}
+/**
+ * Returns the aria label
+ */
+function getItemAriaLabel(translations, supportsSelection, states, accessibleLabel) {
+    return generateAriaLabel(translations, accessibleLabel || '', {
+        isSelected: !supportsSelection ? undefined : states.isSelected,
+        isIndirect: states.isIndirect,
+        isExpanded: states.isExpanded,
+        isCollapsed: states.isCollapsed
+    });
+}
+/**
+ * Returns the font props for a node or link
+ */
+function _getFontProps(styles) {
+    const fontProps = {};
+    if (!styles)
+        return fontProps;
+    if (styles.fontFamily)
+        fontProps.fontFamily = styles.fontFamily;
+    if (styles.fontSize)
+        fontProps.fontSize = styles.fontSize;
+    if (styles.fontStyle)
+        fontProps.fontStyle = styles.fontStyle;
+    if (styles.fontWeight)
+        fontProps.fontWeight = styles.fontWeight;
+    return fontProps;
+}
+/**
+ * Returns whether the node is a leaf node
+ */
+function isLeafNode(nodeData) {
+    return !nodeData.nodes;
+}
+function isContainerReady(nodeData, nodeBounds, links, promotedLinks, linkDimensions, promotedLinkDimensions) {
+    const nodes = nodeData.nodes;
+    for (let i = 0; i < nodes?.length; i++) {
+        const child = nodes[i].id;
+        if (!nodeBounds.get(child)) {
+            return false;
+        }
+    }
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i].id;
+        const linkDims = linkDimensions.get(link);
+        if (!linkDims || (linkDims.width === 0 && linkDims.height === 0)) {
+            return false;
+        }
+    }
+    for (let i = 0; i < promotedLinks.length; i++) {
+        const link = promotedLinks[i];
+        const linkDims = promotedLinkDimensions.get(getPromotedString(link));
+        if (!linkDims || (linkDims.width === 0 && linkDims.height === 0)) {
+            return false;
+        }
+    }
+    return true;
+}
+function getPromotedString(id) {
+    return `${id.startNode}_${id.endNode}`;
+}
+function comparePromotedLinks(link1, link2) {
+    return link1.startNode === link2.startNode && link1.endNode === link2.endNode;
+}
+function isPromoted(link) {
+    return !('id' in link);
+}
+function getCommonAncestorId(startId, endId, nodeIdToParentMap) {
+    const startAnc = _getAncestorIds(startId, nodeIdToParentMap);
+    const endAnc = _getAncestorIds(endId, nodeIdToParentMap);
+    for (let i = 0; i < startAnc.length; i++) {
+        if (endAnc.indexOf(startAnc[i]) > -1) {
+            return startAnc[i];
+        }
+    }
+    return undefined;
+}
+function getLinksForNode(containerId, links, promotedLinks, nodeIdToParentMap) {
+    // front links are in front of nodes
+    const frontLinks = [];
+    const backLinks = [];
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        const ancId = getCommonAncestorId(link.startNode, link.endNode, nodeIdToParentMap);
+        if (ancId === containerId) {
+            if (!nodeIdToParentMap.get(link.startNode) && !nodeIdToParentMap.get(link.endNode))
+                backLinks.push(link);
+            else
+                frontLinks.push(link);
+        }
+    }
+    const frontPromotedLinks = [];
+    const backPromotedLinks = [];
+    for (let i = 0; i < promotedLinks.length; i++) {
+        const link = promotedLinks[i];
+        const ancId = getCommonAncestorId(link.startNode, link.endNode, nodeIdToParentMap);
+        if (ancId === containerId) {
+            if (!nodeIdToParentMap.get(link.startNode) && !nodeIdToParentMap.get(link.endNode))
+                backPromotedLinks.push(link);
+            else
+                frontPromotedLinks.push(link);
+        }
+    }
+    return { frontLinks, frontPromotedLinks, backLinks, backPromotedLinks };
+}
+function _getAncestorIds(nodeId, nodes) {
+    const ancestors = [];
+    let anc = nodes.get(nodeId);
+    while (anc !== undefined) {
+        ancestors.push(anc);
+        anc = nodes.get(anc);
+    }
+    return ancestors;
+}
+function containerLinksReady(containerLinks, layoutOutput) {
+    const nodes = layoutOutput.nodes;
+    for (let i = 0; i < containerLinks.length; i++) {
+        const link = containerLinks[i];
+        if (!(nodes[link.startNode] && nodes[link.endNode])) {
+            return false;
+        }
+    }
+    return true;
+}
+function changeExpanded(id, expanded) {
+    if (containsKey(expanded, id)) {
+        return removeKey(expanded, id, false);
+    }
+    else {
+        return addKey(expanded, id);
+    }
+}
+function getPromotedLinks(links, expanded, allContainerNodes, allVisibleNodes) {
+    const collapsed = [];
+    allContainerNodes.forEach((node) => {
+        if (!containsKey(expanded, node.id)) {
+            collapsed.push(node);
+        }
+    });
+    const promotedLinks = [];
+    const linkToPromotedMap = new Map();
+    const promotedToLinkMap = new Map();
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        const linkId = link.id;
+        const startVisible = allVisibleNodes.includes(link.startNode)
+            ? link.startNode
+            : firstVisibleAncestor(link.startNode, collapsed);
+        const endVisible = allVisibleNodes.includes(link.endNode)
+            ? link.endNode
+            : firstVisibleAncestor(link.endNode, collapsed);
+        if (startVisible &&
+            endVisible &&
+            (startVisible !== link.startNode || endVisible !== link.endNode) &&
+            startVisible !== endVisible) {
+            const promotedLinkId = `${startVisible}_${endVisible}`;
+            let subLinks = promotedToLinkMap.get(promotedLinkId);
+            if (subLinks) {
+                subLinks.push(link);
+            }
+            else {
+                const promotedLink = {
+                    id: promotedLinkId,
+                    startNode: startVisible,
+                    endNode: endVisible
+                };
+                promotedLinks.push(promotedLink);
+                subLinks = [link];
+            }
+            promotedToLinkMap.set(promotedLinkId, subLinks);
+            linkToPromotedMap.set(linkId, promotedLinkId);
+        }
+    }
+    const finalPromoted = [];
+    for (let i = 0; i < promotedLinks.length; i++) {
+        const promotedLink = promotedLinks[i];
+        finalPromoted.push({
+            startNode: promotedLink.startNode,
+            endNode: promotedLink.endNode,
+            links: promotedToLinkMap.get(promotedLink.id)
+        });
+    }
+    return finalPromoted;
+}
+// One of the start/end node position changed causing the link position to change
+function linkPositionChanged(nodeBounds, bounds, links) {
+    const nodesWithLinks = [];
+    links.forEach((value) => {
+        if (!nodesWithLinks.includes(value.startNode)) {
+            nodesWithLinks.push(value.startNode);
+        }
+        if (!nodesWithLinks.includes(value.endNode)) {
+            nodesWithLinks.push(value.endNode);
+        }
+    });
+    let rerender = false;
+    nodeBounds.forEach((value, key) => {
+        const b2Value = bounds.get(key);
+        let equal = true;
+        if (!b2Value)
+            equal = false;
+        else if (Math.abs(value.x - b2Value.x) > 0.5 ||
+            Math.abs(value.y - b2Value.y) > 0.5 ||
+            Math.abs(value.width - b2Value.width) > 0.5 ||
+            Math.abs(value.height - b2Value.height) > 0.5) {
+            equal = false;
+        }
+        if (!equal && nodesWithLinks.includes(key)) {
+            rerender = true;
+        }
+    });
+    return rerender;
+}
+function getChildInfo(id, nodeIdToDataMap) {
+    const nodes = nodeIdToDataMap.get(id)?.nodes;
+    if (nodes && nodes.length > 0) {
+        return nodes[0];
+    }
+    return undefined;
+}
+function firstVisibleAncestor(nodeId, collapsed) {
+    const isDescendant = (chId, data) => {
+        if (data) {
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].id === chId || isDescendant(chId, data[i].nodes)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    for (let i = 0; i < collapsed.length; i++) {
+        const node = collapsed[i];
+        if (isDescendant(nodeId, node.nodes)) {
+            return node.id;
+        }
+    }
+    return null;
+}
+
+const DiagramLabel = ({ text, position, styles, dimensions, isRTL }) => {
+    const { labelStyle, labelBorderStyle } = labelStyles;
+    const labelPosition = getLabelPosition(dimensions, position, isRTL);
+    const labelRotation = getLabelRotation(position);
+    return (jsx("div", { class: classNames([labelStyle, styles && styles.borderColor && labelBorderStyle]), style: {
+            top: labelPosition.y,
+            left: labelPosition.x,
+            ...styles,
+            ...labelRotation
+        }, children: text }));
+};
+/**
+ * Returns the label rotation props
+ * @param position
+ * @returns rotation props
+ */
+function getLabelRotation(position) {
+    const rotationAngle = position.rotationAngle;
+    const rotationPoint = position.rotationPoint;
+    const rotation = {};
+    if (rotationAngle) {
+        rotation['transform'] = `rotate(${rotationAngle}deg)`;
+    }
+    if (rotationPoint) {
+        rotation['transform-origin'] = `${rotationPoint.x}px ${rotationPoint.y}px`;
+    }
+    return rotation;
+}
+
+const DiagramNodeElement = ({ id, state, position, activeId, nodeRenderer, onNodeSizeChanged, data, accessibleLabel, isDimmed, supportsSelection, content, labelPosition, labelDimensions }) => {
+    const { nodeStyles, dimmedItemStyle } = itemStyles;
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const ref = useRef(null);
+    // TODO JET-62472 change to one resize observer function
+    const optionsRef = useRef({ box: 'border-box' });
+    useResizeObserver(ref, useCallback((entry) => {
+        const boxSize = entry.borderBoxSize;
+        const width = boxSize[0].inlineSize;
+        const height = boxSize[0].blockSize;
+        onNodeSizeChanged(width, height, id);
+    }, [id, onNodeSizeChanged]), optionsRef.current);
+    const nodePos = position ? position : { x: 0, y: 0 };
+    const { direction } = useUser();
+    const hasLabel = data.label && labelPosition && labelDimensions;
+    const expander = (jsx("div", { "data-oj-private-button": id, class: buttonStyle, children: jsx(EmbeddedIconButton, { "aria-hidden": true, size: "xs", children: content ? jsx(SvgMinus, {}) : jsx(SvgPlus, {}) }) }));
+    const context = {
+        state: state,
+        data: data,
+        childContext: content,
+        expander: expander
+    };
+    return (jsxs("div", { ref: ref, class: nodeStyles, "data-oj-private-node": id, role: content ? 'group' : "img", "aria-label": getItemAriaLabel(translations, supportsSelection, {
+            isSelected: state.isSelected,
+            isExpanded: content !== undefined,
+            isCollapsed: (content === undefined) && (data.nodes !== undefined)
+        }, accessibleLabel), style: {
+            top: nodePos.y,
+            left: nodePos.x
+        }, id: state.isFocused || state.isHovered ? activeId : undefined, children: [jsx("div", { class: classNames([isDimmed ? dimmedItemStyle : undefined]), children: nodeRenderer(context) }), hasLabel ? (jsx("div", { class: layerStyles, children: jsx(DiagramLabel, { styles: data.labelStyle, text: data.label, position: labelPosition, dimensions: labelDimensions.get(id), isRTL: direction === 'rtl' }) })) : undefined] }, id));
+};
+
+const DiagramLinkElement = ({ id, state, activeId, data, linkRenderer, accessibleLabel, isDimmed, supportsSelection, layoutOutput, onLinkSizeChanged }) => {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const { dimmedItemStyle, linkStyles } = itemStyles;
+    const context = {
+        state: state,
+        data: data,
+        layoutOutput: layoutOutput,
+        type: 'link'
+    };
+    const ref = useRef(null);
+    const optionsRef = useRef({ box: 'border-box' });
+    useResizeObserver(ref, useCallback((entry) => {
+        const boxSize = entry.borderBoxSize;
+        const width = boxSize[0].inlineSize;
+        const height = boxSize[0].blockSize;
+        onLinkSizeChanged(width, height, id);
+    }, [id, onLinkSizeChanged]), optionsRef.current);
+    return (jsx("g", { ref: ref, id: state.isFocused ? activeId : undefined, "aria-label": getItemAriaLabel(translations, supportsSelection, {
+            isSelected: state.isSelected
+        }, accessibleLabel), "data-oj-private-link": id, role: "img", class: classNames([linkStyles, isDimmed && dimmedItemStyle]), children: linkRenderer(context) }, id));
+};
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+const ZOOM_INCREMENT = 0.05;
+const ZOOM_TO_FIT_PADDING = 20;
+const zoom = (nextZoom, zoom, minZoom, maxZoom, onZoomChange) => {
+    const newZoom = nextZoom > maxZoom || nextZoom < minZoom ? zoom : nextZoom;
+    const isZoomChanged = newZoom !== zoom;
+    isZoomChanged &&
+        onZoomChange &&
+        onZoomChange({
+            zoomValue: newZoom
+        });
+};
+/**
+ * Returns the zoom properties for the diagram.
+ */
+function getZoomProps(props, width, height, contentBounds) {
+    const zoomTofitZoom = getZoomToFitZoom(width, height, contentBounds);
+    const maxZoom = props.maxZoom || 1;
+    const minZoom = props.minZoom || Math.min(maxZoom, zoomTofitZoom);
+    const zoom = props.zoomValue ? props.zoomValue : zoomTofitZoom;
+    return {
+        zooming: props.zooming ? props.zooming : 'off',
+        // default value of 0 indicates zoom-to-fit level
+        minZoom: minZoom,
+        maxZoom: maxZoom,
+        // zoom value of 0 will default to zoom to fit
+        zoomValue: constrainZoom(zoom, minZoom, maxZoom),
+        onZoom: props.onZoom
+    };
+}
+/**
+ * Returns the zoom to fit zoom level
+ */
+function getZoomToFitZoom(width, height, contentBounds) {
+    const zoomX = (width - 2 * ZOOM_TO_FIT_PADDING) / contentBounds.width;
+    const zoomY = (height - 2 * ZOOM_TO_FIT_PADDING) / contentBounds.height;
+    return Math.min(zoomX, zoomY);
+}
+/**
+ * Constrains the zoom level
+ */
+function constrainZoom(zoom, minZoom, maxZoom) {
+    let newZoom = Math.max(minZoom, zoom);
+    newZoom = Math.min(maxZoom, newZoom);
+    return newZoom;
+}
+/**
+ * Returns the panX, panY, and zoom when zooming and centering an item
+ */
+function zoomAndCenterItemFromInfo(info, linkIdToDataMap, bounds, width, height, maxZoom) {
+    const type = info.type;
+    let totalBounds;
+    if (type === 'node') {
+        totalBounds = bounds.get(info.id);
+    }
+    else {
+        const link = linkIdToDataMap.get(info.id);
+        const startNodeBounds = bounds.get(link.startNode);
+        const endNodeBounds = bounds.get(link.endNode);
+        const minX = Math.min(startNodeBounds.x, endNodeBounds.x);
+        const minY = Math.min(startNodeBounds.y, endNodeBounds.y);
+        const maxX = Math.max(startNodeBounds.x + startNodeBounds.width, endNodeBounds.x + startNodeBounds.width);
+        const maxY = Math.max(startNodeBounds.y + startNodeBounds.height, endNodeBounds.y + endNodeBounds.height);
+        totalBounds = { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    }
+    return getPanZoomToCenterNode(totalBounds, maxZoom, width, height);
+}
+/**
+ * Returns the pan and zoom values in order
+ * to center a node or link
+ */
+function getPanZoomToCenterNode(bounds, maxZoom, width, height) {
+    const zoomX = (width - 2 * ZOOM_TO_FIT_PADDING) / bounds.width;
+    const zoomY = (height - 2 * ZOOM_TO_FIT_PADDING) / bounds.height;
+    const zoom = Math.min(zoomX, zoomY, maxZoom);
+    const cX = bounds.width / 2 + bounds.x;
+    const cY = bounds.height / 2 + bounds.y;
+    return { centerX: cX, centerY: cY, zoom: zoom };
+}
+
+function DiagramLabelLayer({ labelPosition, itemProps, labelDimensions }) {
+    const { direction } = useUser();
+    return (jsx("div", { class: layerStyles, children: itemProps.map((item) => {
+            if (item.label && labelPosition.get(item.id)) {
+                return (jsx(DiagramLabel, { styles: item.labelStyle, text: item.label, position: labelPosition.get(item.id), dimensions: labelDimensions.get(item.id), isRTL: direction === 'rtl' }));
+            }
+            return undefined;
+        }) }));
+}
+
+function DiagramLinkLayer({ links, states, linkRenderer, width, height, supportsSelection, onLinkSizeChanged, layoutOutput, combinedNodeBounds, linkLabelPositions, labelDimensions, minX, minY }) {
+    const zoom = getZoomToFitZoom(width, height, combinedNodeBounds);
+    return (jsxs("div", { class: linkLayerStyle, style: { top: -minY, left: -minX }, children: [jsx("svg", { width: width / zoom, height: height / zoom, class: layerStyles, overflow: "visible", children: links.map((link) => {
+                    const state = {
+                        isSelected: states.selectedLinkIds.includes(link.id),
+                        isFocused: states.focusedId === link.id,
+                        isHovered: states.hoveredId === link.id,
+                        zoom: states.zoom
+                    };
+                    return (jsx(DiagramLinkElement, { id: link.id, state: state, isDimmed: (states.highlightedNodeIds.length !== 0 ||
+                            states.highlightedLinkIds.length !== 0 ||
+                            states.highlightedPromotedLinkIds.length !== 0) &&
+                            !states.highlightedLinkIds.includes(link.id), activeId: states.activeId, accessibleLabel: link.accessibleLabel, data: link, linkRenderer: linkRenderer, supportsSelection: supportsSelection, layoutOutput: layoutOutput, onLinkSizeChanged: onLinkSizeChanged }));
+                }) }), labelDimensions ? (jsx("div", { children: links && linkLabelPositions ? (jsx(DiagramLabelLayer, { labelPosition: linkLabelPositions, itemProps: links, labelDimensions: labelDimensions })) : undefined })) : undefined] }));
+}
+
+const DiagramPromotedLinkElement = ({ id, state, activeId, linkRenderer, isDimmed, supportsSelection, layoutOutput, onLinkSizeChanged }) => {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const { dimmedItemStyle, linkStyles } = itemStyles;
+    const context = {
+        state: state,
+        data: id.links,
+        layoutOutput: layoutOutput,
+        startNode: id.startNode,
+        endNode: id.endNode,
+        type: 'promotedLink'
+    };
+    const ref = useRef(null);
+    const optionsRef = useRef({ box: 'border-box' });
+    const stringId = getPromotedString(id);
+    useResizeObserver(ref, useCallback((entry) => {
+        const boxSize = entry.borderBoxSize;
+        const width = boxSize[0].inlineSize;
+        const height = boxSize[0].blockSize;
+        onLinkSizeChanged(width, height, stringId);
+    }, [stringId, onLinkSizeChanged]), optionsRef.current);
+    const num_links = id.links.length;
+    const accessibleLabel = num_links > 1
+        ? translations.diagram_promotedLinks({ num_links: num_links.toString() })
+        : translations.diagram_promotedLink();
+    return (jsx("g", { ref: ref, id: state.isFocused ? activeId : undefined, "aria-label": getItemAriaLabel(translations, supportsSelection, {
+            isSelected: state.isSelected,
+            isIndirect: true
+        }, accessibleLabel), "data-oj-private-promoted-link": stringId, role: "img", class: classNames([linkStyles, isDimmed && dimmedItemStyle]), children: linkRenderer(context) }, stringId));
+};
+
+function DiagramPromotedLinkLayer({ links, states, linkRenderer, width, height, supportsSelection, onLinkSizeChanged, layoutOutput, combinedNodeBounds, minX, minY }) {
+    const zoom = getZoomToFitZoom(width, height, combinedNodeBounds);
+    return (jsx("div", { class: linkLayerStyle, style: { top: -minY, left: -minX }, children: jsx("svg", { width: width / zoom, height: height / zoom, class: layerStyles, overflow: "visible", children: links.map((link) => {
+                const state = {
+                    isSelected: states.selectedPromotedLinkIds.includes(link),
+                    isFocused: states.focusedId === link,
+                    isHovered: states.hoveredId === link,
+                    zoom: states.zoom
+                };
+                return (jsx(DiagramPromotedLinkElement, { id: link, state: state, isDimmed: (states.highlightedNodeIds.length !== 0 ||
+                        states.highlightedLinkIds.length !== 0 ||
+                        states.highlightedPromotedLinkIds.length !== 0) &&
+                        !states.highlightedPromotedLinkIds.includes(link), activeId: states.activeId, linkRenderer: linkRenderer, supportsSelection: supportsSelection, layoutOutput: layoutOutput, onLinkSizeChanged: onLinkSizeChanged }));
+            }) }) }));
+}
+
+function DiagramNodeLayer({ nodes, states, nodeRenderer, linkRenderer, nodeBounds, width, height, onNodeSizeChanged, onLinkSizeChanged, onPromotedLinkSizeChanged, supportsSelection, nodeLabelPositions, linkLabelPositions, labelDimensions, minX = 0, minY = 0, parentId, links, promotedLinks, layoutOutput, zoom, nodeIdToParentMap, linkDimensions, promotedLinkDimensions, rootRef, combinedNodeBounds, nodeBoundsRef, normalizeLinks = false }) {
+    const { frontLinks, frontPromotedLinks, backLinks, backPromotedLinks } = getLinksForNode(parentId, links, promotedLinks, nodeIdToParentMap);
+    return (jsxs("div", { class: layerStyles, "data-oj-private-node-container": true, children: [layoutOutput &&
+                linkRenderer &&
+                backLinks.length > 0 &&
+                containerLinksReady(backLinks, layoutOutput) && (jsx(DiagramLinkLayer, { links: backLinks, states: states, linkRenderer: linkRenderer, width: width / zoom, height: height, supportsSelection: supportsSelection, labelDimensions: labelDimensions, layoutOutput: layoutOutput, onLinkSizeChanged: onLinkSizeChanged, linkLabelPositions: linkLabelPositions, combinedNodeBounds: combinedNodeBounds, minY: normalizeLinks ? minY : 0, minX: normalizeLinks ? minX : 0 })), layoutOutput &&
+                linkRenderer &&
+                backPromotedLinks.length > 0 &&
+                containerLinksReady(backPromotedLinks, layoutOutput) && (jsx(DiagramPromotedLinkLayer, { links: backPromotedLinks, states: states, linkRenderer: linkRenderer, width: width / zoom, height: height, supportsSelection: supportsSelection, layoutOutput: layoutOutput, onLinkSizeChanged: onPromotedLinkSizeChanged, combinedNodeBounds: combinedNodeBounds, minY: normalizeLinks ? minY : 0, minX: normalizeLinks ? minX : 0 })), nodes.map((node) => {
+                // this is for initial render before the layout function so render all nodes at 0,0
+                const position = nodeBounds && nodeBounds.get(node.id)
+                    ? { x: nodeBounds.get(node.id).x - minX, y: nodeBounds.get(node.id).y - minY }
+                    : undefined;
+                const state = {
+                    isSelected: states.selectedNodeIds.includes(node.id),
+                    isFocused: states.focusedId === node.id,
+                    isHovered: states.hoveredId === node.id,
+                    zoom: states.zoom,
+                    isExpanded: states.expanded && containsKey(states.expanded, node.id)
+                };
+                const { backLinks, backPromotedLinks } = getLinksForNode(node.id, links, promotedLinks, nodeIdToParentMap);
+                // Leaf node or node is collapsed
+                if (isLeafNode(node) || !containsKey(states.expanded, node.id)) {
+                    return (jsx(DiagramNodeElement, { id: node.id, position: position, state: state, isDimmed: (states.highlightedNodeIds.length !== 0 ||
+                            states.highlightedLinkIds.length !== 0 ||
+                            states.highlightedPromotedLinkIds.length !== 0) &&
+                            !states.highlightedNodeIds.includes(node.id), activeId: states.activeId, nodeRenderer: nodeRenderer, onNodeSizeChanged: onNodeSizeChanged, accessibleLabel: node.accessibleLabel, data: node, supportsSelection: supportsSelection, labelDimensions: labelDimensions, labelPosition: nodeLabelPositions?.get(node.id) }));
+                    // Expanded container where children are ready
+                }
+                else if (nodeBounds &&
+                    isContainerReady(node, nodeBounds, backLinks, backPromotedLinks, linkDimensions, promotedLinkDimensions)) {
+                    const childContent = getContent(node, states, nodeRenderer, onNodeSizeChanged, onLinkSizeChanged, onPromotedLinkSizeChanged, supportsSelection, links, promotedLinks, nodeIdToParentMap, width, height, zoom, node.id, nodeBounds, linkDimensions, promotedLinkDimensions, combinedNodeBounds, nodeBoundsRef, nodeLabelPositions, linkLabelPositions, labelDimensions, linkRenderer, layoutOutput, rootRef);
+                    return (jsx(DiagramNodeElement, { id: node.id, position: position, state: state, isDimmed: (states.highlightedNodeIds.length !== 0 ||
+                            states.highlightedLinkIds.length !== 0 ||
+                            states.highlightedPromotedLinkIds.length !== 0) &&
+                            !states.highlightedNodeIds.includes(node.id), activeId: states.activeId, nodeRenderer: nodeRenderer, onNodeSizeChanged: onNodeSizeChanged, accessibleLabel: node.accessibleLabel, data: node, supportsSelection: supportsSelection, content: childContent, labelDimensions: labelDimensions, labelPosition: nodeLabelPositions?.get(node.id) }));
+                }
+                else {
+                    const childContent = getContent(node, states, nodeRenderer, onNodeSizeChanged, onLinkSizeChanged, onPromotedLinkSizeChanged, supportsSelection, links, promotedLinks, nodeIdToParentMap, width, height, zoom, node.id, nodeBounds, linkDimensions, promotedLinkDimensions, combinedNodeBounds, nodeBoundsRef, nodeLabelPositions, linkLabelPositions, labelDimensions, linkRenderer, layoutOutput, rootRef);
+                    return jsx("div", { children: childContent.content });
+                }
+            }), layoutOutput &&
+                linkRenderer &&
+                frontLinks.length > 0 &&
+                containerLinksReady(frontLinks, layoutOutput) && (jsx(DiagramLinkLayer, { links: frontLinks, states: states, linkRenderer: linkRenderer, width: width / zoom, height: height, supportsSelection: supportsSelection, labelDimensions: labelDimensions, layoutOutput: layoutOutput, onLinkSizeChanged: onLinkSizeChanged, linkLabelPositions: linkLabelPositions, combinedNodeBounds: combinedNodeBounds, minY: normalizeLinks ? minY : 0, minX: normalizeLinks ? minX : 0 })), layoutOutput &&
+                linkRenderer &&
+                frontPromotedLinks.length > 0 &&
+                containerLinksReady(frontPromotedLinks, layoutOutput) && (jsx(DiagramPromotedLinkLayer, { links: frontPromotedLinks, states: states, linkRenderer: linkRenderer, width: width / zoom, height: height, supportsSelection: supportsSelection, layoutOutput: layoutOutput, onLinkSizeChanged: onPromotedLinkSizeChanged, combinedNodeBounds: combinedNodeBounds, minY: normalizeLinks ? minY : 0, minX: normalizeLinks ? minX : 0 }))] }));
+}
+function getContent(nodeData, states, nodeRenderer, onNodeSizeChanged, onLinkSizeChanged, onPromotedLinkSizeChanged, supportsSelection, links, promotedLinks, nodeIdToParentMap, width, height, zoom, parentId, nodeBounds, linkDimensions, promotedLinkDimensions, combinedNodeBounds, nodeBoundsRef, nodeLabelPositions, linkLabelPositions, labelDimensions, linkRenderer, layoutOutput, rootRef) {
+    const nodes = nodeData.nodes;
+    const { backLinks, backPromotedLinks } = getLinksForNode(parentId, links, promotedLinks, nodeIdToParentMap);
+    const { minX, minY, contentWidth, contentHeight, bounds } = getBounds(nodes, backLinks, backPromotedLinks, nodeBounds, linkDimensions, promotedLinkDimensions, zoom, rootRef);
+    const nodeFullBounds = nodeBoundsRef.current;
+    nodeFullBounds?.set(nodeData.id, bounds);
+    nodeBoundsRef.current = nodeFullBounds;
+    const content = (jsx("div", { "data-oj-private-child": parentId, style: { position: 'relative' }, children: jsx(DiagramNodeLayer, { nodes: nodes, nodeBounds: nodeBounds, states: states, minX: nodeBounds ? minX : undefined, minY: nodeBounds ? minY : undefined, nodeRenderer: nodeRenderer, onNodeSizeChanged: onNodeSizeChanged, onLinkSizeChanged: onLinkSizeChanged, onPromotedLinkSizeChanged: onPromotedLinkSizeChanged, supportsSelection: supportsSelection, nodeLabelPositions: nodeLabelPositions, linkLabelPositions: linkLabelPositions, labelDimensions: labelDimensions, links: links, promotedLinks: promotedLinks, nodeIdToParentMap: nodeIdToParentMap, linkRenderer: linkRenderer, layoutOutput: layoutOutput, width: width, height: height, zoom: zoom, parentId: parentId, linkDimensions: linkDimensions, promotedLinkDimensions: promotedLinkDimensions, rootRef: rootRef, combinedNodeBounds: combinedNodeBounds, nodeBoundsRef: nodeBoundsRef }) }));
+    return {
+        content,
+        width: contentWidth ? contentWidth : 0,
+        height: contentHeight ? contentHeight - minY : 0,
+        bounds
+    };
+}
+
+function DiagramLayers({ nodes, links, promotedLinks, nodeRenderer, linkRenderer, states, nodeBounds, width, height, onNodeSizeChanged, onLinkSizeChanged, onPromotedLinkSizeChanged, labelDimensions, nodeLabelPositions, linkLabelPositions, supportsSelection, layoutOutput, zoom, nodeIdToParentMap, linkDimensions, promotedLinkDimensions, rootRef, combinedNodeBounds, nodeBoundsRef, normalizeLinks }) {
+    const { backLinks, backPromotedLinks } = getLinksForNode(undefined, links, promotedLinks, nodeIdToParentMap);
+    const { minX, minY } = getBounds(nodes, backLinks, backPromotedLinks, nodeBounds, linkDimensions, promotedLinkDimensions, zoom, rootRef);
+    return (jsx(Fragment, { children: jsx(DiagramNodeLayer, { nodes: nodes, nodeBounds: nodeBounds, states: states, nodeRenderer: nodeRenderer, onNodeSizeChanged: onNodeSizeChanged, onLinkSizeChanged: onLinkSizeChanged, onPromotedLinkSizeChanged: onPromotedLinkSizeChanged, supportsSelection: supportsSelection, nodeLabelPositions: nodeLabelPositions, linkLabelPositions: linkLabelPositions, labelDimensions: labelDimensions, linkDimensions: linkDimensions, promotedLinkDimensions: promotedLinkDimensions, rootRef: rootRef, links: links, promotedLinks: promotedLinks, nodeIdToParentMap: nodeIdToParentMap, linkRenderer: linkRenderer, layoutOutput: layoutOutput, width: width, height: height, zoom: zoom, minX: nodeBounds && minX !== Infinity ? minX : undefined, minY: nodeBounds && minY !== Infinity ? minY : undefined, combinedNodeBounds: combinedNodeBounds, nodeBoundsRef: nodeBoundsRef, normalizeLinks: normalizeLinks }) }));
+}
+
+const constrainPan = (previousPan, nextPan, panBounds, panDirection) => {
+    const panX = panDirection !== 'y' ? nextPan.panX : previousPan.panX;
+    const panY = panDirection !== 'x' ? nextPan.panY : previousPan.panY;
+    return {
+        panX: panX > panBounds.maxX ? panBounds.maxX : panX < panBounds.minX ? panBounds.minX : panX,
+        panY: panY > panBounds.maxY ? panBounds.maxY : panY < panBounds.minY ? panBounds.minY : panY
+    };
+};
+const pan = (previousPan, nextPan, panDirection, zoom, width, height, panBounds, onPanChange) => {
+    if (!panBounds) {
+        //On initial render before nodes are rendered
+        return { newPan: { panX: 0, panY: 0 } };
+    }
+    const newPan = constrainPan(previousPan, nextPan, panBounds, panDirection);
+    const isPanChanged = newPan.panX !== previousPan.panX || newPan.panY !== previousPan.panY;
+    const center = panXYToCenterXY(newPan.panX, newPan.panY, zoom, width, height);
+    isPanChanged &&
+        onPanChange &&
+        onPanChange({
+            centerX: center.centerX,
+            centerY: center.centerY
+        });
+    return { newPan };
+};
+const getPanBounds = (dWidth, dHeight, elemBounds, zoom, minZoom, initPanZoomState, panType) => {
+    const { x, y, width, height } = elemBounds;
+    let minX, maxX, minY, maxY;
+    if (panType === 'centerContent') {
+        minX = dWidth / 2 - (width + x) * zoom;
+        minY = dHeight / 2 - (height + y) * zoom;
+        maxX = dWidth / 2 - x * zoom;
+        maxY = dHeight / 2 - y * zoom;
+    }
+    else {
+        // panType equals fixed
+        const zoomRatio = zoom / minZoom;
+        // Find left corner of the content at min zoom and content is centered
+        const minZoomX = (dWidth - width * minZoom) / 2 - x * minZoom;
+        const minZoomY = (dHeight - height * minZoom) / 2 - y * minZoom;
+        // When we pan all the way to the right, the left corner of displayable area is 0,0 as in min zoom.
+        // When we pan all the way to the left, lets find the corner of the displayable area
+        const leftCornerX = dWidth - dWidth * zoomRatio;
+        const leftCornerY = dHeight - dHeight * zoomRatio;
+        // Now we have everything to calculate pan zoom constraints
+        minX = leftCornerX + minZoomX * zoomRatio;
+        minY = leftCornerY + minZoomY * zoomRatio;
+        maxX = minZoomX * zoomRatio;
+        maxY = minZoomY * zoomRatio;
+    }
+    const initZoom = initPanZoomState.zoom;
+    const initCenterX = initPanZoomState.centerX;
+    const initCenterY = initPanZoomState.centerY;
+    // If an initial panZoomState is set, should expand pan bounds to include it
+    let dx, dy;
+    if (initCenterX) {
+        const boundsX = initCenterX * initZoom - dWidth / 2;
+        if (-boundsX * initZoom < minX) {
+            dx = minX - boundsX * initZoom;
+            minX -= dx;
+            maxX += dx;
+        }
+        else if (-boundsX * initZoom > maxX) {
+            dx = -boundsX * initZoom - maxX;
+            minX -= dx;
+            maxX += dx;
+        }
+    }
+    if (initCenterY) {
+        const boundsY = initCenterY * initZoom - dHeight / 2;
+        if (-boundsY * initZoom < minY) {
+            dy = minY - boundsY * initZoom;
+            minY -= dy;
+            maxY += dy;
+        }
+        else if (-boundsY * initZoom > maxY) {
+            dy = -boundsY * initZoom - maxY;
+            minY -= dy;
+            maxY += dy;
+        }
+    }
+    return {
+        minX: minX,
+        maxX: maxX,
+        minY: minY,
+        maxY: maxY
+    };
+};
+/**
+ * Returns the pan properties for the diagram.
+ */
+function getPanProps(props, contentBounds, userDragMode, isDeviceTouch) {
+    return {
+        panning: isDeviceTouch
+            ? userDragMode === 'pan' && props.panning
+                ? props.panning
+                : 'off'
+            : props.panning
+                ? props.panning
+                : 'off',
+        panDirection: props.panDirection ? props.panDirection : 'any',
+        centerX: props.centerX !== undefined ? props.centerX : contentBounds.width / 2,
+        centerY: props.centerY !== undefined ? props.centerY : contentBounds.height / 2,
+        onPan: props.onPan
+    };
+}
+/**
+ * Converts centerX,Y coordinates to panX,Y coordinates
+ */
+function centerXYToPanXY(centerX, centerY, zoom, width, height) {
+    return {
+        panX: width / 2 - centerX * zoom,
+        panY: height / 2 - centerY * zoom
+    };
+}
+/**
+ * Converts panX,Y coordinates to centerX,Y coordinates
+ */
+function panXYToCenterXY(panX, panY, zoom, width, height) {
+    return {
+        centerX: (width / 2 - panX) / zoom,
+        centerY: (height / 2 - panY) / zoom
+    };
+}
+
+function DiagramPanZoomContainer({ centerX, centerY, children, zoom, width, height }) {
+    const panValues = centerXYToPanXY(centerX, centerY, zoom, width, height);
+    return (jsx("div", { class: panZoomStyles, style: {
+            //TODO JET-62471 look at using matrices or both in transform instead
+            translate: `${panValues.panX}px ${panValues.panY}px`,
+            transform: `scale(${zoom})`
+        }, children: children }));
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Returns the link data based on link info in a diagram.
+ * @param itemInfo
+ * @returns
+ */
+function getLinkDetailFromInfo(itemInfo, links, promotedLinks) {
+    let link;
+    for (let i = 0; i < links.length; i++) {
+        link = links[i];
+        if (itemInfo.id === link.id) {
+            return link;
+        }
+    }
+    for (let i = 0; i < promotedLinks.length; i++) {
+        link = promotedLinks[i];
+        if (comparePromotedLinks(itemInfo.id, link)) {
+            return link;
+        }
+    }
+    return undefined;
+}
+/**
+ * Utility method that adds sorting attributes of each link to an array
+ */
+function addSortingAttributes(node, listOfLinks, nodes, nodeBounds) {
+    let angle, distance, direction;
+    const linkDetail = [];
+    for (let i = 0; i < listOfLinks.length; i++) {
+        const link = listOfLinks[i];
+        angle = _getClockwiseAngle(node, link, nodes, nodeBounds);
+        distance = _getNodesDistance(link, nodes, nodeBounds);
+        direction = _getLinkDirection(node, link);
+        if ('id' in link)
+            linkDetail.push({
+                id: link.id,
+                angle: angle,
+                distance: distance,
+                direction: direction,
+                type: 'link'
+            });
+        else {
+            linkDetail.push({
+                id: getPromotedString(link),
+                angle: angle,
+                distance: distance,
+                direction: direction,
+                type: 'promotedLink'
+            });
+        }
+    }
+    return linkDetail;
+}
+/**
+ * Returns a function that compares two link around a given node
+ * The links are analyzed by angle, distance from the node and direction. The sorting attributes are added to the links before sorting.
+ */
+function getLinkComparator() {
+    return (link1, link2) => {
+        const { angle: linkAngle1, distance: linkDistance1, direction: linkDirection1 } = link1;
+        const { angle: linkAngle2, distance: linkDistance2, direction: linkDirection2 } = link2;
+        let res = -1;
+        if (!_anglesAreEqualWithinTolerance(linkAngle1, linkAngle2) && linkAngle1 > linkAngle2) {
+            res = 1;
+        }
+        else if (_anglesAreEqualWithinTolerance(linkAngle1, linkAngle2)) {
+            //check distance and direction
+            if (linkDistance1 > linkDistance2) {
+                res = 1;
+            }
+            else if (linkDistance2 == linkDistance1 && linkDirection1 > linkDirection2) {
+                //outgoing to ingoing
+                res = 1;
+            }
+            else if (linkDistance2 == linkDistance1 && linkDirection1 == linkDirection2) {
+                res = 0;
+            }
+        }
+        return res;
+    };
+}
+/**
+ * Returns navigable links for a given node
+ */
+function getNavigableLinksForNodeId(nodeId, listOfLinks) {
+    const links = [];
+    listOfLinks.forEach((link) => {
+        const startId = link.startNode;
+        const endId = link.endNode;
+        if (startId == nodeId || endId == nodeId)
+            links.push(link);
+    });
+    return links;
+}
+/**
+ * Get the clockwise angle for the link given node as a center
+ */
+function _getClockwiseAngle(node, link, nodes, nodeBounds) {
+    //find opposite node
+    let currNode;
+    let startNode = nodes[0];
+    let endNode = nodes[0];
+    for (let i = 0; i < nodes.length; i++) {
+        currNode = nodes[i];
+        if (currNode.id === link.startNode) {
+            startNode = currNode;
+        }
+        else if (currNode.id === link.endNode) {
+            endNode = currNode;
+        }
+    }
+    const oppositeNode = node.id == startNode.id ? endNode : startNode;
+    const p1 = _getNodeCenter(node, nodeBounds);
+    const p2 = _getNodeCenter(oppositeNode, nodeBounds);
+    let angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+    angle = angle < 0 ? angle + Math.PI * 2 : angle;
+    return angle;
+}
+/**
+ * Get the distance between start and end nodes for the given link
+ */
+function _getNodesDistance(link, nodes, nodeBounds) {
+    let currNode;
+    let startNode = nodes[0];
+    let endNode = nodes[0];
+    for (let i = 0; i < nodes.length; i++) {
+        currNode = nodes[i];
+        if (currNode.id === link.startNode) {
+            startNode = currNode;
+        }
+        else if (currNode.id === link.endNode) {
+            endNode = currNode;
+        }
+    }
+    const p1 = _getNodeCenter(startNode, nodeBounds);
+    const p2 = _getNodeCenter(endNode, nodeBounds);
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+/**
+ * Get link direction for the given node.  1 if the node is the end node
+ * and 0 if it is the start node
+ */
+function _getLinkDirection(node, link) {
+    if (link.endNode === node.id) {
+        return 1;
+    }
+    return 0;
+}
+/**
+ * Get node center
+ */
+function _getNodeCenter(node, nodeBounds) {
+    const nodeBB = nodeBounds.get(node.id);
+    return { x: nodeBB.x + nodeBB.width / 2, y: nodeBB.y + nodeBB.height / 2 };
+}
+/**
+ * Calculates the angle weighted by distance
+ */
+function calcDistanceAngleWeighted(objectBB, currentBB, direction) {
+    // Variables used for calculating penalties when calculating distances between two navigables.
+    const optimalAngle1 = (15 / 180) * Math.PI;
+    const optimalAngle2 = (40 / 180) * Math.PI;
+    const suboptimalAnglePenalty1 = 2; // multiplier to the distance
+    const suboptimalAnglePenalty2 = 6; // multiplier to the distance
+    const objCenterX = objectBB.x + objectBB.width / 2;
+    const objCenterY = objectBB.y + objectBB.height / 2;
+    const curCenterX = currentBB.x + currentBB.width / 2;
+    const curCenterY = currentBB.y + currentBB.height / 2;
+    const x_dist = Math.abs(objCenterX - curCenterX);
+    const y_dist = Math.abs(objCenterY - curCenterY);
+    const angle = Math.atan2(y_dist, x_dist);
+    let distance = Math.sqrt(x_dist * x_dist + y_dist * y_dist);
+    // Angle penalty based on direction
+    if ((angle > optimalAngle1 && (direction == 'right' || direction == 'left')) ||
+        (angle < Math.PI / 2 - optimalAngle1 && (direction == 'up' || direction == 'down'))) {
+        if ((angle > optimalAngle2 && (direction == 'right' || direction == 'left')) ||
+            (angle < Math.PI / 2 - optimalAngle2 && (direction == 'up' || direction == 'down'))) {
+            distance *= suboptimalAnglePenalty2;
+        }
+        else {
+            distance *= suboptimalAnglePenalty1;
+        }
+    }
+    return distance;
+}
+/**
+ * Given a direction, is a certain node is a valid destination to navigate to
+ */
+function isValidDestination(objBB, curBB, direction, compareCenters) {
+    // compare the centers of the navigable and to be valid, the navigable must be in the right direction
+    // without tolerance
+    if (compareCenters) {
+        const objCenterX = objBB.x + 0.5 * objBB.width;
+        const curCenterX = curBB.x + 0.5 * curBB.width;
+        const objCenterY = objBB.y + 0.5 * objBB.height;
+        const curCenterY = curBB.y + 0.5 * curBB.height;
+        switch (direction) {
+            case 'up':
+                return objCenterY < curCenterY;
+            case 'down':
+                return objBB.y > curCenterY;
+            case 'right':
+                return objCenterX > curCenterX;
+            case 'left':
+                return objCenterX < curCenterX;
+        }
+        return true;
+    }
+    switch (direction) {
+        case 'up':
+            return objBB.y < curBB.y || _areEqualWithinTolerance(objBB.y, curBB.y);
+        case 'down':
+            return objBB.y > curBB.y || _areEqualWithinTolerance(objBB.y, curBB.y);
+        case 'right':
+            return objBB.x > curBB.x || _areEqualWithinTolerance(objBB.x, curBB.x);
+        case 'left':
+            return objBB.x < curBB.x || _areEqualWithinTolerance(objBB.x, curBB.x);
+    }
+    return true;
+}
+/**
+ * Returns true if two nodes are in contact
+ */
+function calcInContact(objRect, curRect, direction) {
+    switch (direction) {
+        case 'up':
+            return (_isVerticallyAligned(objRect, curRect) &&
+                (curRect.y <= objRect.y + objRect.height ||
+                    _areEqualWithinTolerance(curRect.y, objRect.y + objRect.height)));
+        case 'down':
+            return (_isVerticallyAligned(objRect, curRect) &&
+                (objRect.y <= curRect.y + curRect.height ||
+                    _areEqualWithinTolerance(objRect.y, curRect.y + curRect.height)));
+        case 'right':
+            return (_isHorizontallyAligned(objRect, curRect) &&
+                (objRect.x <= curRect.x + curRect.width ||
+                    _areEqualWithinTolerance(objRect.x, curRect.x + curRect.width)));
+        case 'left':
+            return (_isHorizontallyAligned(objRect, curRect) &&
+                (curRect.x <= objRect.x + objRect.width ||
+                    _areEqualWithinTolerance(curRect.x, objRect.x + objRect.width)));
+    }
+    return false;
+}
+function _isVerticallyAligned(rect1, rect2) {
+    return ((rect1.x >= rect2.x && rect1.x <= rect2.x + rect2.width) ||
+        (rect2.x >= rect1.x && rect2.x <= rect1.x + rect1.width));
+}
+function _isHorizontallyAligned(rect1, rect2) {
+    return ((rect1.y >= rect2.y && rect1.y <= rect2.y + rect2.height) ||
+        (rect2.y >= rect1.y && rect2.y <= rect1.y + rect1.height));
+}
+function _areEqualWithinTolerance(a, b) {
+    return Math.abs(a - b) <= 0.0000001;
+}
+function _anglesAreEqualWithinTolerance(a1, a2) {
+    let res = Math.abs(a1 - a2) <= 0.0000001;
+    if (!res) {
+        res = Math.abs(Math.PI * 2 + Math.min(a1, a2) - Math.max(a1, a2)) <= 0.0000001;
+    }
+    return res;
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function useDiagramNavigation(bounds, linkIdToDataMap, promotedLinkMap, nodeIdToDataMap) {
+    const currentKeyboardFocusNode = useRef();
+    const nodeBoundsById = bounds;
+    function getNextNavigableNode(direction, compareCenters, current, listOfObjects) {
+        if (!listOfObjects)
+            return current;
+        if (!current)
+            return listOfObjects[0];
+        const currBB = nodeBoundsById.get(current.id);
+        if (!currBB)
+            return listOfObjects[0];
+        let nextObject = current; //init to current object
+        let nextDistance = Number.MAX_VALUE;
+        // If an object is in contact it overrules all other attributes
+        // Only another in contact object with better attributes will have higher precedence
+        let nextInContact = false;
+        // Whether or not the for loop has encountered the current object
+        let hasFoundCurrent = false;
+        let object, inContact, distance;
+        for (let i = 0; i < listOfObjects.length; i++) {
+            object = listOfObjects[i];
+            if (object === current) {
+                hasFoundCurrent = true;
+                continue;
+            }
+            const objBB = nodeBoundsById.get(object.id);
+            if (!objBB)
+                continue;
+            const objBounds = { x: objBB.x, y: objBB.y, width: objBB.width, height: objBB.height };
+            const currBounds = { x: currBB.x, y: currBB.y, width: currBB.width, height: currBB.height };
+            if (!isValidDestination(objBounds, currBounds, direction, compareCenters))
+                continue;
+            inContact = calcInContact(objBounds, currBounds, direction);
+            if (nextInContact && !inContact)
+                continue;
+            distance = calcDistanceAngleWeighted(objBounds, currBounds, direction);
+            if (distance == 0 && !hasFoundCurrent)
+                continue;
+            // Make sure incontact flag have highest precedence
+            if ((!nextInContact && inContact) ||
+                (distance < nextDistance && ((nextInContact && inContact) || !nextInContact))) {
+                nextDistance = distance;
+                nextObject = object;
+                nextInContact = inContact;
+            }
+        }
+        return nextObject;
+    }
+    /**
+     * Get next navigavle link depending on direction - clockwise or conter clockwise.
+     * The decision is made based on location of nodes centers rather than link paths or link angles.
+     */
+    function getNextNavigableLink(direction, listOfNodes, currentLink, listOfLinks, promotedLinks) {
+        if (!(listOfLinks || promotedLinks))
+            return currentLink;
+        const allLinks = listOfLinks && promotedLinks
+            ? [...listOfLinks, ...promotedLinks]
+            : (listOfLinks ? listOfLinks : promotedLinks);
+        if (!currentLink)
+            return allLinks[0];
+        const keyboardFocusNode = currentKeyboardFocusNode.current;
+        const nodeId = keyboardFocusNode ? keyboardFocusNode : currentLink.startNode;
+        const node = nodeIdToDataMap.get(nodeId);
+        if (!node)
+            return currentLink;
+        const adjLinks = getNavigableLinksForNodeId(node.id, allLinks);
+        const linksWithSortingAttributes = addSortingAttributes(node, adjLinks, listOfNodes, nodeBoundsById);
+        linksWithSortingAttributes.sort(getLinkComparator());
+        //clockwise direction
+        const bForward = direction == 'down' ? true : false;
+        let index = 0;
+        for (let i = 0; i < linksWithSortingAttributes.length; i++) {
+            const id = 'id' in currentLink ? currentLink.id : getPromotedString(currentLink);
+            const link = linksWithSortingAttributes[i];
+            if (link.id === id) {
+                if (bForward)
+                    index = i == linksWithSortingAttributes.length - 1 ? 0 : i + 1;
+                else
+                    index = i == 0 ? linksWithSortingAttributes.length - 1 : i - 1;
+                break;
+            }
+        }
+        if (linksWithSortingAttributes[index].type === 'link') {
+            return linkIdToDataMap.get(linksWithSortingAttributes[index].id);
+        }
+        return promotedLinkMap.get(linksWithSortingAttributes[index].id);
+    }
+    /**
+     * Returns the link detail when a node to link navigation occurs
+     */
+    function navigateFromNodeToLink(listOfLinks, promotedLinks, event, node) {
+        if (!node)
+            return undefined;
+        const adjLinks = getNavigableLinksForNodeId(node.id, [...listOfLinks, ...promotedLinks]);
+        if (adjLinks.length < 1)
+            return undefined;
+        let link = adjLinks[0];
+        const nodeBB = nodeBoundsById.get(node.id);
+        let object, currNode, currNodeBB, currNodeBBCenterX;
+        const nodeCenterX = nodeBB.x + nodeBB.width / 2;
+        currentKeyboardFocusNode.current = node.id;
+        for (let i = 0; i < adjLinks.length; i++) {
+            object = adjLinks[i];
+            currNode = object.startNode === node.id ? object.endNode : object.startNode;
+            currNodeBB = nodeBoundsById.get(currNode);
+            currNodeBBCenterX = currNodeBB.x + currNodeBB.width / 2;
+            if (
+            // equivalent of ≤ and ≥
+            (event.altKey && event.code === 'Comma' && currNodeBBCenterX <= nodeCenterX) ||
+                (event.altKey && event.code === 'Period' && currNodeBBCenterX >= nodeCenterX)) {
+                link = object;
+                break;
+            }
+        }
+        return (isPromoted(link) ? { id: link, type: 'promotedLink' } : { id: link.id, type: 'link' });
+    }
+    /**
+     * Returns the node detail when a link to node navigation occurs
+     */
+    function navigateFromLinkToNode(startNode, endNode, event) {
+        const key = event.key;
+        const startNodeBB = nodeBoundsById.get(startNode);
+        const endNodeBB = nodeBoundsById.get(endNode);
+        if (!startNodeBB || !endNodeBB)
+            return undefined;
+        const startNodeCenterX = startNodeBB.x + startNodeBB.width / 2;
+        const endNodeCenterX = endNodeBB.x + endNodeBB.width / 2;
+        const newNode = (endNodeCenterX > startNodeCenterX && key === 'ArrowRight') ||
+            (endNodeCenterX < startNodeCenterX && key === 'ArrowLeft')
+            ? endNode
+            : startNode;
+        return { id: newNode, type: 'node' };
+    }
+    return {
+        getNextNavigableNode,
+        getNextNavigableLink,
+        navigateFromNodeToLink,
+        navigateFromLinkToNode
+    };
+}
+
+const DEFAULT_KB_PAN = 15;
+const DEFAULT_KB_ZOOM = 0.15;
+function useEvents(touchResponse, initNode, nodes, links, promotedLinks, nodeBounds, linkIdToDataMap, nodeIdToDataMap, width, height, maxZoom, expanded, itemIdToParentMap, promotedLinkMap, onItemHover, onItemFocus, kbPanCallback, kbZoomCallback, onExpandedChange) {
+    const { getNextNavigableNode, getNextNavigableLink, navigateFromNodeToLink, navigateFromLinkToNode } = useDiagramNavigation(nodeBounds, linkIdToDataMap, promotedLinkMap, nodeIdToDataMap);
+    const [focusedItemInfo, setfocusedItemInfo] = useState({
+        id: initNode.id,
+        type: 'node'
+    });
+    const [hoveredItemInfo, sethoveredItemInfo] = useState();
+    const activeId = useRef();
+    const cancelEvent = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const keyDownHandler = (event) => {
+        const key = event.key;
+        let eventConsumed = false;
+        // tabbing out of the diagram
+        if (key === 'TAB') {
+            return;
+        }
+        // if this a switch from node to link or vice versa
+        if (isChangeItemType(event)) {
+            let nextItemInfo;
+            if (focusedItemInfo.type === 'node') {
+                nextItemInfo = navigateFromNodeToLink(links, promotedLinks, event, nodeIdToDataMap.get(focusedItemInfo.id));
+            }
+            else if (focusedItemInfo.type === 'link') {
+                const data = linkIdToDataMap.get(focusedItemInfo.id);
+                nextItemInfo = navigateFromLinkToNode(data.startNode, data.endNode, event);
+            }
+            else {
+                // promoted link
+                const id = focusedItemInfo.id;
+                nextItemInfo = navigateFromLinkToNode(id.startNode, id.endNode, event);
+            }
+            handleKeyboardInput(nextItemInfo);
+            eventConsumed = true;
+        }
+        else if (isNavigationEvent(key)) {
+            const nextItemInfo = handleKeyboardNavigationEvent(key);
+            handleKeyboardInput(nextItemInfo);
+            eventConsumed = true;
+        }
+        else {
+            switch (key) {
+                case 'PageUp': {
+                    kbPanCallback &&
+                        kbPanCallback({
+                            dPan: {
+                                dx: event.shiftKey ? -DEFAULT_KB_PAN : 0,
+                                dy: event.shiftKey ? 0 : -DEFAULT_KB_PAN
+                            }
+                        });
+                    eventConsumed = true;
+                    break;
+                }
+                case 'PageDown': {
+                    kbPanCallback &&
+                        kbPanCallback({
+                            dPan: {
+                                dx: event.shiftKey ? DEFAULT_KB_PAN : 0,
+                                dy: event.shiftKey ? 0 : DEFAULT_KB_PAN
+                            }
+                        });
+                    eventConsumed = true;
+                    break;
+                }
+                case '+':
+                case '=': {
+                    kbZoomCallback && kbZoomCallback({ dZoom: DEFAULT_KB_ZOOM });
+                    eventConsumed = true;
+                    break;
+                }
+                case '-':
+                case '_': {
+                    kbZoomCallback && kbZoomCallback({ dZoom: -DEFAULT_KB_ZOOM });
+                    eventConsumed = true;
+                    break;
+                }
+                case '0': {
+                    if (event.ctrlKey && event.altKey) {
+                        const { centerX, centerY, zoom } = zoomAndCenterItemFromInfo(focusedItemInfo, linkIdToDataMap, nodeBounds, width, height, maxZoom);
+                        kbZoomCallback && kbZoomCallback({ nZoom: zoom });
+                        kbPanCallback && kbPanCallback({ nPan: { cx: centerX, cy: centerY } });
+                    }
+                    else {
+                        // zoom to fit
+                        kbZoomCallback && kbZoomCallback({});
+                        kbPanCallback && kbPanCallback({ center: true });
+                    }
+                    eventConsumed = true;
+                    break;
+                }
+                case ' ': {
+                    if (event.ctrlKey && event.shiftKey) {
+                        if (focusedItemInfo.type === 'node') {
+                            const id = focusedItemInfo.id;
+                            const newExpanded = changeExpanded(id, expanded);
+                            onExpandedChange && onExpandedChange({ expanded: newExpanded });
+                        }
+                    }
+                    break;
+                }
+                case '[': {
+                    if (focusedItemInfo.type === 'node') {
+                        const child = getChildInfo(focusedItemInfo.id, nodeIdToDataMap);
+                        if (child) {
+                            const item = { id: child.id, type: 'node' };
+                            handleKeyboardInput(item);
+                        }
+                    }
+                    eventConsumed = true;
+                    break;
+                }
+                case ']': {
+                    if (focusedItemInfo.type === 'node') {
+                        const parentId = itemIdToParentMap.get(focusedItemInfo.id);
+                        if (parentId) {
+                            const item = { id: parentId, type: 'node' };
+                            handleKeyboardInput(item);
+                        }
+                    }
+                    eventConsumed = true;
+                    break;
+                }
+            }
+        }
+        if (eventConsumed) {
+            cancelEvent(event);
+        }
+    };
+    const keyUpHandler = (event) => {
+        const key = event.code;
+        switch (key) {
+            case 'Tab': {
+                updatefocusedItemInfo({
+                    ...focusedItemInfo,
+                    isCurrent: true,
+                    isFocusVisible: true
+                });
+                break;
+            }
+        }
+    };
+    const blurHandler = () => {
+        if (hoveredItemInfo != null || focusedItemInfo.isCurrent) {
+            onItemFocus?.(undefined);
+        }
+        const itemInfo = { ...focusedItemInfo, isCurrent: false, isFocusVisible: false };
+        setfocusedItemInfo(itemInfo);
+    };
+    const onHover = (event) => {
+        const itemInfo = getNavigableInfo(event.target, promotedLinkMap);
+        if (itemInfo && !isEqualItem(itemInfo, hoveredItemInfo)) {
+            sethoveredItemInfo({ ...itemInfo, isCurrent: true });
+            activeId.current = getRandomId();
+            setfocusedItemInfo({ ...focusedItemInfo, isCurrent: false });
+            let detail;
+            if (itemInfo.type === 'node') {
+                detail = {
+                    id: itemInfo.id,
+                    type: 'node',
+                    data: nodeIdToDataMap.get(itemInfo.id)
+                };
+            }
+            else if (itemInfo.type === 'link') {
+                detail = {
+                    id: itemInfo.id,
+                    type: 'link',
+                    data: linkIdToDataMap.get(itemInfo.id)
+                };
+            }
+            else if (itemInfo.type === 'promotedLink') {
+                detail = {
+                    type: 'promotedLink',
+                    id: itemInfo.id
+                };
+            }
+            onItemHover?.(detail);
+        }
+    };
+    const onHoverLeave = () => {
+        sethoveredItemInfo(undefined);
+        activeId.current = undefined;
+        onItemHover?.(undefined);
+    };
+    const hoverHandlers = useVisHover(onHover, undefined, onHoverLeave, touchResponse);
+    const pointerUpHandler = (event) => {
+        const itemInfo = getNavigableInfo(event.target, promotedLinkMap);
+        if (itemInfo.id != null) {
+            let buttonId;
+            if (itemInfo.type === 'node') {
+                buttonId = expCollapseButtonId(event.target);
+                if (buttonId) {
+                    const newExpanded = changeExpanded(buttonId, expanded);
+                    onExpandedChange && onExpandedChange({ expanded: newExpanded });
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+            }
+            setfocusedItemInfo(itemInfo);
+            activeId.current = getRandomId();
+        }
+    };
+    function updatefocusedItemInfo(itemInfo) {
+        if (itemInfo.type === 'node') {
+            onItemFocus?.({
+                id: itemInfo.id,
+                type: 'node',
+                data: nodeIdToDataMap.get(itemInfo.id)
+            });
+        }
+        else if (itemInfo.type === 'link') {
+            onItemFocus?.({
+                id: itemInfo.id,
+                type: 'link',
+                data: linkIdToDataMap.get(itemInfo.id)
+            });
+        }
+        else if (itemInfo.type === 'promotedLink') {
+            onItemFocus?.({
+                id: itemInfo.id,
+                type: 'promotedLink'
+            });
+        }
+        activeId.current = getRandomId();
+        setfocusedItemInfo(itemInfo);
+    }
+    function handleKeyboardInput(item) {
+        if (!item)
+            return;
+        if (!isEqualItem(item, focusedItemInfo)) {
+            item.isCurrent = true;
+            item.isFocusVisible = true;
+            if (hoveredItemInfo) {
+                sethoveredItemInfo({ ...hoveredItemInfo, isCurrent: false });
+            }
+            updatefocusedItemInfo(item);
+        }
+    }
+    function isNavigationEvent(key) {
+        switch (key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'ArrowLeft': {
+                return true;
+            }
+        }
+        return false;
+    }
+    function isChangeItemType(event) {
+        const key = event.code;
+        // check if switching from node to link
+        // equivalent of ≤ and ≥
+        if (focusedItemInfo.type === 'node' && event.altKey && (key === 'Period' || key === 'Comma')) {
+            return true;
+            // check if switching from link to node
+        }
+        else if (!(focusedItemInfo.type === 'node') &&
+            (key === 'ArrowLeft' || key === 'ArrowRight')) {
+            return true;
+        }
+        return false;
+    }
+    function handleKeyboardNavigationEvent(key) {
+        let direction = 'down';
+        switch (key) {
+            case 'ArrowDown': {
+                direction = 'down';
+                break;
+            }
+            case 'ArrowUp': {
+                direction = 'up';
+                break;
+            }
+            case 'ArrowRight': {
+                direction = 'right';
+                break;
+            }
+            case 'ArrowLeft': {
+                direction = 'left';
+                break;
+            }
+        }
+        if (focusedItemInfo.type === 'node') {
+            const parent = itemIdToParentMap.get(focusedItemInfo.id);
+            const navigableNodes = parent && nodeIdToDataMap.get(parent) ? nodeIdToDataMap.get(parent).nodes : nodes;
+            const itemDetail = getNextNavigableNode(direction, true, nodeIdToDataMap.get(focusedItemInfo.id), navigableNodes);
+            return itemDetail ? { id: itemDetail.id, type: 'node' } : focusedItemInfo;
+        }
+        else {
+            const linkDetail = getLinkDetailFromInfo(focusedItemInfo, links, promotedLinks);
+            const itemDetail = getNextNavigableLink(direction, nodes, linkDetail, links, promotedLinks);
+            if (itemDetail && isPromoted(itemDetail))
+                return { id: itemDetail, type: 'promotedLink' };
+            else if (itemDetail && !isPromoted(itemDetail))
+                return { id: itemDetail.id, type: 'link' };
+            else
+                return { id: focusedItemInfo.id, type: focusedItemInfo.type };
+        }
+    }
+    const onContextMenuDismissed = (gesture) => {
+        if (gesture === 'keyboard') {
+            updatefocusedItemInfo({
+                ...focusedItemInfo,
+                isFocusVisible: true,
+                isCurrent: true
+            });
+        }
+    };
+    const onFocus = () => {
+        activeId.current = getRandomId();
+    };
+    return {
+        focusedItemInfo,
+        hoveredItemInfo,
+        activeId: activeId.current,
+        onContextMenuDismissed,
+        eventsProps: mergeProps(hoverHandlers, {
+            onKeyUp: keyUpHandler,
+            onKeyDown: keyDownHandler,
+            onBlur: blurHandler,
+            onPointerUp: pointerUpHandler,
+            onFocus
+        })
+    };
+}
+
+/**
+ * Returns the datatip.
+ * @param text The text string for the diagram item.
+ * @param rootRef The ref for root of the diagram.
+ * @param focusedItemBoundsRef The ref for focused item bounds.
+ * @param focusedItemInfo The ItemInfo for focused item.
+ * @returns
+ */
+const useDiagramDatatip = ({ touchResponse, datatip, focusedItemBoundsRef, focusedItemInfo, panState, zoom, width, nodesMap, linksMap, hoveredItem }) => {
+    const { direction } = useUser();
+    const isRtl = direction === 'rtl';
+    const datatipC = getDatatipContent(nodesMap, linksMap, focusedItemInfo, hoveredItem, datatip);
+    const elementBounds = focusedItemBoundsRef.current
+        ? {
+            x: focusedItemBoundsRef.current.x + panState.panX,
+            y: focusedItemBoundsRef.current.y + panState.panY,
+            width: focusedItemBoundsRef.current.width * zoom,
+            height: focusedItemBoundsRef.current.height * zoom
+        }
+        : undefined;
+    const offset = focusedItemInfo.isCurrent
+        ? calculateOffset(isRtl, width, elementBounds)
+        : calculateOffset(isRtl, width);
+    const { datatipContent, datatipProps } = useDatatip({
+        content: datatipC?.content,
+        borderColor: datatipC?.borderColor,
+        placement: 'top-start',
+        offset,
+        anchor: focusedItemInfo?.isCurrent ? 'element' : 'pointer',
+        touchResponse
+    });
+    return { datatipContent: datatipContent, datatipProps: datatipProps };
+};
+
+const usePointerGesture = ({ captureTargetRef, numPointers = 1, onPointerGestureDown, onPointerGestureMove, onPointerGestureEnd, onExtraneousPointerDown, isDisabled = false }) => {
+    const activePointers = useRef([]);
+    if (isDisabled) {
+        activePointers.current = [];
+    }
+    const onPointerDown = (e) => {
+        activePointers.current.push(e);
+        if (activePointers.current.length === numPointers) {
+            onPointerGestureDown && onPointerGestureDown({ pointers: activePointers.current });
+        }
+        else if (activePointers.current.length > numPointers) {
+            onExtraneousPointerDown && onExtraneousPointerDown({ pointers: activePointers.current });
+        }
+    };
+    const onPointerMove = (e) => {
+        if (activePointers.current.length === 0)
+            return;
+        const index = activePointers.current.findIndex((pointerEvent) => pointerEvent.pointerId === e.pointerId);
+        if (index === -1)
+            return;
+        activePointers.current[index] = e;
+        if (activePointers.current.length === numPointers) {
+            activePointers.current.forEach((e) => captureTargetRef.current.setPointerCapture(e.pointerId));
+            onPointerGestureMove && onPointerGestureMove({ pointers: activePointers.current });
+        }
+    };
+    const onPointerUp = (e) => {
+        const index = activePointers.current.findIndex((pointerEvent) => pointerEvent.pointerId === e.pointerId);
+        if (index === -1)
+            return;
+        activePointers.current[index] = e;
+        if (activePointers.current.length === numPointers) {
+            onPointerGestureEnd && onPointerGestureEnd({ pointers: activePointers.current });
+        }
+        activePointers.current.splice(index, 1);
+    };
+    const onPointerCancel = onPointerUp;
+    const onPointerLeave = onPointerUp;
+    return isDisabled
+        ? {}
+        : {
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel,
+            onPointerLeave
+        };
+};
+
+/**
+ * Whether point with coordinates are in the draggable region
+ */
+const inDraggableRegion = (x, y, region) => {
+    if (!region)
+        return true;
+    const { xMin, xMax, yMin, yMax } = region;
+    return x >= xMin && x <= xMax && y >= yMin && y <= yMax;
+};
+/**
+ * Returns region offset
+ */
+const getRegionOffset = (x, y, region) => {
+    if (!region)
+        return { regionOffsetX: x, regionOffsetY: y };
+    return { regionOffsetX: x - region.xMin, regionOffsetY: y - region.yMin };
+};
+const useDrag = ({ captureTargetRef, draggableRegion, onDragStart, onDragMove, onDragEnd, isDisabled = false }) => {
+    const inactiveState = { isDragging: false, x0: -1, y0: -1, regionOffsetX: -1, regionOffsetY: -1 };
+    const dragState = useRef(inactiveState);
+    const handlePointerEvent = (e, cb) => {
+        const { isDragging, x0, y0, regionOffsetX, regionOffsetY } = dragState.current;
+        if (!isDragging)
+            return;
+        const x = e.pageX;
+        const y = e.pageY;
+        cb && cb({ x, y, dx: x - x0, dy: y - y0, regionOffsetX, regionOffsetY, originalEvent: e });
+    };
+    const dragProps = usePointerGesture({
+        captureTargetRef,
+        numPointers: 1, // Only allow 1 pointer dragging
+        onExtraneousPointerDown: () => {
+            dragState.current = inactiveState;
+        },
+        onPointerGestureDown: ({ pointers: [e] }) => {
+            const x = e.pageX;
+            const y = e.pageY;
+            if (e.button !== 0 || !inDraggableRegion(x, y, draggableRegion))
+                return;
+            const { regionOffsetX, regionOffsetY } = getRegionOffset(x, y, draggableRegion);
+            dragState.current = { isDragging: true, x0: x, y0: y, regionOffsetX, regionOffsetY };
+            onDragStart && onDragStart({ x, y, regionOffsetX, regionOffsetY, originalEvent: e });
+        },
+        onPointerGestureMove: ({ pointers: [e] }) => {
+            handlePointerEvent(e, onDragMove);
+        },
+        onPointerGestureEnd: ({ pointers: [e] }) => {
+            handlePointerEvent(e, onDragEnd);
+            dragState.current = inactiveState;
+        }
+    });
+    return isDisabled ? {} : dragProps;
+};
+
+const useDragPan = ({ panProps, captureTargetRef, panBounds, width, height, zoom, onDragPanStart, onDragPanEnd }) => {
+    const prevPanState = useRef({ panX: 0, panY: 0 });
+    const initialPanState = useRef({ panX: 0, panY: 0 });
+    const dragProps = useDrag({
+        captureTargetRef,
+        onDragStart: () => {
+            const panValues = centerXYToPanXY(panProps.centerX, panProps.centerY, zoom, width, height);
+            initialPanState.current = {
+                panX: panValues.panX,
+                panY: panValues.panY
+            };
+            onDragPanStart && onDragPanStart();
+        },
+        onDragMove: ({ dx, dy }) => {
+            const nextPan = {
+                panX: initialPanState.current.panX + dx,
+                panY: initialPanState.current.panY + dy
+            };
+            const { newPan } = pan(prevPanState.current, nextPan, panProps.panDirection, zoom, width, height, panBounds, panProps.onPan);
+            prevPanState.current = newPan;
+        },
+        onDragEnd: ({ originalEvent }) => {
+            // If panning occurred, call preventDefault to prevent selection from occurring
+            if (initialPanState.current.panX !== prevPanState.current.panX ||
+                initialPanState.current.panY !== prevPanState.current.panY)
+                originalEvent.preventDefault();
+            onDragPanEnd && onDragPanEnd();
+        },
+        isDisabled: panProps.panning === 'off'
+    });
+    return dragProps;
+};
+
+const PX_FACTOR_PER_LINE = 15; // Value used in Toolkit
+const PX_FACTOR_PER_PAGE = 40; // Value copied from datagrid; this is not handled in Toolkit
+const getNormalizedDelta = (e) => {
+    const { deltaX, deltaY, deltaMode } = e;
+    switch (deltaMode) {
+        case e.DOM_DELTA_PIXEL:
+            return { deltaX: -deltaX, deltaY: -deltaY };
+        case e.DOM_DELTA_LINE:
+            return { deltaX: -deltaX * PX_FACTOR_PER_LINE, deltaY: -deltaY * PX_FACTOR_PER_LINE };
+        case e.DOM_DELTA_PAGE:
+            return { deltaX: -deltaX * PX_FACTOR_PER_PAGE, deltaY: -deltaY * PX_FACTOR_PER_PAGE };
+        default:
+            return { deltaX: -deltaX, deltaY: -deltaY };
+    }
+};
+const useWheel = ({ onWheel: onWheelCallback, preventDefault = true, isDisabled = false }) => {
+    const onWheel = (e) => {
+        const { deltaX, deltaY } = getNormalizedDelta(e);
+        if (preventDefault)
+            e.preventDefault();
+        onWheelCallback({
+            x: e.offsetX,
+            y: e.offsetY,
+            deltaX,
+            deltaY,
+            ctrlKey: e.ctrlKey || e.metaKey
+        });
+    };
+    return isDisabled ? {} : { onWheel };
+};
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+const useWheelZoom = ({ zooming, minZoom, maxZoom, zoomValue, onZoom }) => {
+    const wheelProps = useWheel({
+        onWheel: ({ deltaY }) => {
+            const newZoom = zoomValue * (1 + ZOOM_INCREMENT * deltaY);
+            zoom(newZoom, zoomValue, minZoom, maxZoom, onZoom);
+        },
+        isDisabled: zooming === 'off'
+    });
+    return wheelProps;
+};
+
+const getMidpoint = (p1, p2) => ({ x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 });
+const getDistance = (p1, p2) => Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p2.y) ** 2);
+const usePinch = ({ captureTargetRef, onPinchZoomStart, onPinchZoomChange, onPinchZoomEnd, isDisabled = false }) => {
+    const origin = useRef({ x: -1, y: -1 });
+    const prevDistance = useRef(-1);
+    const reset = () => {
+        origin.current = { x: -1, y: -1 };
+        prevDistance.current = -1;
+    };
+    if (isDisabled)
+        reset();
+    const pinchProps = usePointerGesture({
+        captureTargetRef,
+        numPointers: 2, // Pinch gesture requires 2 pointers
+        onPointerGestureDown: ({ pointers: [pointer1, pointer2] }) => {
+            const p1 = { x: pointer1.offsetX, y: pointer1.offsetY };
+            const p2 = { x: pointer2.offsetX, y: pointer2.offsetY };
+            origin.current = getMidpoint(p1, p2);
+            prevDistance.current = getDistance(p1, p2);
+            onPinchZoomStart &&
+                onPinchZoomStart({
+                    origin: origin.current,
+                    delta: 0
+                });
+        },
+        onPointerGestureMove: ({ pointers: [pointer1, pointer2] }) => {
+            const p1 = { x: pointer1.offsetX, y: pointer1.offsetY };
+            const p2 = { x: pointer2.offsetX, y: pointer2.offsetY };
+            const distance = getDistance(p1, p2);
+            const delta = distance - prevDistance.current;
+            prevDistance.current = distance;
+            onPinchZoomChange &&
+                onPinchZoomChange({
+                    origin: origin.current,
+                    delta
+                });
+        },
+        onPointerGestureEnd: () => {
+            reset();
+            onPinchZoomEnd && onPinchZoomEnd();
+        }
+    });
+    return isDisabled ? {} : pinchProps;
+};
+
+const usePinchZoom = ({ captureTargetRef, zooming, minZoom, maxZoom, zoomValue, onZoom }) => {
+    const pinchProps = usePinch({
+        captureTargetRef,
+        onPinchZoomChange: ({ delta }) => {
+            const newZoom = zoomValue * (1 + ZOOM_INCREMENT * delta);
+            zoom(newZoom, zoomValue, minZoom, maxZoom, onZoom);
+        },
+        isDisabled: zooming === 'off'
+    });
+    return pinchProps;
+};
+
+const usePanZoom = ({ props, captureTargetRef, width, height, contentBounds, isRtl }) => {
+    const [cursor, setCursor] = useState();
+    const zoomProps = getZoomProps(props, width, height, contentBounds);
+    const panBounds = useRef();
+    const prevZoom = useRef();
+    const panning = useRef();
+    const initPanZoomState = useRef({
+        zoom: props.zoomValue || 0,
+        centerX: props.centerX,
+        centerY: props.centerY
+    });
+    const isDeviceTouch = isTouch();
+    const plotArea = {
+        width: width,
+        height: height,
+        x: 0,
+        y: 0
+    };
+    const showPanButton = isDeviceTouch ? props.panning && props.panning !== 'off' : undefined;
+    const dragModeOptions = {
+        isZoomScroll: true,
+        plotAreaSpace: plotArea,
+        componentWidth: width,
+        isRtl,
+        showPanButton: showPanButton ?? false,
+        showZoomButton: false,
+        showSelectButton: false,
+        isDisabled: !isDeviceTouch
+    };
+    const { toggleButtonContent, userDragMode } = useVisDragModeControls(dragModeOptions);
+    const panProps = getPanProps(props, contentBounds, userDragMode, isDeviceTouch);
+    if (contentBounds.width !== Infinity &&
+        (zoomProps.zoomValue !== prevZoom.current || panProps.panning !== panning.current)) {
+        panBounds.current = getPanBounds(width, height, contentBounds, zoomProps.zoomValue, zoomProps.minZoom, initPanZoomState.current, panProps.panning);
+        prevZoom.current = zoomProps.zoomValue;
+        panning.current = panProps.panning;
+    }
+    const dragPanProps = useDragPan({
+        panProps: panProps,
+        captureTargetRef: captureTargetRef,
+        panBounds: panBounds.current,
+        zoom: zoomProps.zoomValue,
+        width,
+        height,
+        onDragPanStart: () => setCursor('grabbing'),
+        onDragPanEnd: () => setCursor('auto')
+    });
+    //dZoom or nZoom is required
+    const kbZoomCallback = (props) => {
+        const newZoom = props.dZoom
+            ? zoomProps.zoomValue + props.dZoom
+            : getZoomToFitZoom(width, height, contentBounds);
+        zoom(props.nZoom ? props.nZoom : newZoom, zoomProps.zoomValue, zoomProps.minZoom, zoomProps.maxZoom, zoomProps.onZoom);
+    };
+    const prevPanState = useRef({ panX: 0, panY: 0 });
+    // dPan or nPan is required
+    const kbPanCallback = (props) => {
+        let centerX;
+        let centerY;
+        if (props.center) {
+            centerX = contentBounds.x + contentBounds.width / 2;
+            centerY = contentBounds.y + contentBounds.height / 2;
+        }
+        else if (props.dPan) {
+            centerX = panProps.centerX + props.dPan.dx;
+            centerY = panProps.centerY + props.dPan.dy;
+        }
+        else {
+            centerX = props.nPan.cx;
+            centerY = props.nPan.cy;
+        }
+        const panValues = centerXYToPanXY(centerX, centerY, zoomProps.zoomValue, width, height);
+        const { newPan } = pan(prevPanState.current, panValues, panProps.panDirection, zoomProps.zoomValue, width, height, panBounds.current, panProps.onPan);
+        prevPanState.current = newPan;
+    };
+    const wheelZoomProps = useWheelZoom(zoomProps);
+    const pinchZoomProps = usePinchZoom({
+        captureTargetRef,
+        zooming: zoomProps.zooming,
+        minZoom: zoomProps.minZoom,
+        maxZoom: zoomProps.maxZoom,
+        zoomValue: zoomProps.zoomValue,
+        onZoom: zoomProps.onZoom
+    });
+    const panZoomProps = mergeProps(dragPanProps, wheelZoomProps, pinchZoomProps);
+    return {
+        panZoomProps,
+        panProps,
+        zoomProps,
+        toggleButtonContent,
+        cursor,
+        centerX: panProps.centerX,
+        centerY: panProps.centerY,
+        zoomValue: zoomProps.zoomValue,
+        kbPanCallback: panProps.panning !== 'off' ? kbPanCallback : undefined,
+        kbZoomCallback: zoomProps.zooming !== 'off' ? kbZoomCallback : undefined
+    };
+};
+
+function useDiagramSelection({ selectedIds, selectionMode, nodeMap, linkMap, focusedItemInfo, onSelectionChange, rootRef, promotedLinkMap }) {
+    const nodeIdToDataMap = nodeMap.itemIdToDataMap;
+    const nodeEncodedToIdMap = new Map();
+    const linkEncodedToIdMap = new Map();
+    const linkIdToDataMap = linkMap.itemIdToDataMap;
+    const encodeNodeId = (id) => {
+        const encoded = `N_${id}`;
+        nodeEncodedToIdMap.set(encoded, id);
+        return encoded;
+    };
+    const decodeNodeId = (id) => nodeEncodedToIdMap.get(id);
+    const encodeLinkId = (id) => {
+        const encoded = `L_${id}`;
+        linkEncodedToIdMap.set(encoded, id);
+        return encoded;
+    };
+    const decodeLinkId = (id) => linkEncodedToIdMap.get(id);
+    const encodePromotedLinkId = (id) => `P_${JSON.stringify(id)}`;
+    const decodePromotedLinkId = (id) => JSON.parse(id.slice(2));
+    const encodedNodesSelection = selectedIds.nodes ? selectedIds.nodes.map(encodeNodeId) : [];
+    const encodedLinksSelection = selectedIds.links ? selectedIds.links.map(encodeLinkId) : [];
+    const encodedPromotedLinksSelection = selectedIds.promotedLinks
+        ? selectedIds.promotedLinks.map(encodePromotedLinkId)
+        : [];
+    const encodedSelection = [
+        ...encodedNodesSelection,
+        ...encodedLinksSelection,
+        ...encodedPromotedLinksSelection
+    ];
+    const idExtracter = (event) => {
+        // return encodeNodeId(id) or encodeLinkId(id) depending on node or link selection or undefined if clicked on empty space
+        const info = event.type === 'keyup'
+            ? focusedItemInfo
+            : getNavigableInfo(event.target, promotedLinkMap, rootRef);
+        return info.id !== undefined
+            ? info.type === 'node'
+                ? encodeNodeId(info.id)
+                : info.type === 'link'
+                    ? encodeLinkId(info.id)
+                    : encodePromotedLinkId(info.id)
+            : undefined;
+    };
+    const onEncodedSelectionChange = (detail) => {
+        const newNodeIds = detail.ids
+            .filter((encId) => encId[0] === 'N')
+            .map((encId) => decodeNodeId(encId));
+        const newLinkIds = detail.ids
+            .filter((encId) => encId[0] === 'L')
+            .map((encId) => decodeLinkId(encId));
+        const newPromotedLinkIds = detail.ids
+            .filter((encId) => encId[0] === 'P')
+            .map((encId) => decodePromotedLinkId(encId));
+        const newSelectedNodeIds = newNodeIds.filter((id) => nodeIdToDataMap.get(id)?.selectable !== 'off');
+        const newSelectedLinkIds = newLinkIds.filter((id) => linkIdToDataMap.get(id)?.selectable !== 'off');
+        const nodeData = newSelectedNodeIds.map((selectedId) => {
+            return nodeIdToDataMap.get(selectedId);
+        });
+        const linkData = newSelectedLinkIds.map((selectedId) => {
+            return linkIdToDataMap.get(selectedId);
+        });
+        return (onSelectionChange &&
+            onSelectionChange({
+                nodes: {
+                    ids: newSelectedNodeIds,
+                    data: nodeData
+                },
+                links: {
+                    ids: newSelectedLinkIds,
+                    data: linkData
+                },
+                promotedLinks: {
+                    ids: newPromotedLinkIds
+                }
+            }));
+    };
+    const getDataById = (id) => {
+        let data;
+        if (id[0] === 'N') {
+            const nodeId = decodeNodeId(id);
+            data = nodeMap.itemIdToDataMap.get(nodeId);
+        }
+        else if (id[0] === 'L') {
+            const linkId = decodeLinkId(id);
+            data = linkMap.itemIdToDataMap.get(linkId);
+        }
+        else if (id[0] === 'P') {
+            data = decodePromotedLinkId(id);
+        }
+        return data;
+    };
+    const isKeyboardSelection = (event) => {
+        return event.key === '[' || event.key === ']';
+    };
+    const { selectionContent, selectionProps } = useSelection({
+        selection: encodedSelection,
+        idExtracter,
+        selectionMode,
+        getDataById,
+        onChange: onEncodedSelectionChange,
+        isKeyboardSelection
+    });
+    return { selectionContent, selectionProps };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+function getDiagramContextMenuContext(nodesMap, linksMap, type, idx) {
+    let context;
+    if (type === 'node') {
+        context = {
+            data: nodesMap.get(idx),
+            type
+        };
+    }
+    else if (type === 'link') {
+        context = {
+            data: linksMap.get(idx),
+            type
+        };
+    }
+    else if (type === 'promotedLink') {
+        context = {
+            id: idx,
+            type
+        };
+    }
+    else {
+        context = {
+            type: 'background'
+        };
+    }
+    return {
+        context: context
+    };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+const useDiagramContextMenu = ({ focusedItemInfo, rootRef, contextMenuConfig, onContextMenuDismissed, nodesMap, linksMap, promotedLinkMap }) => {
+    const { contextMenuProps, contextMenuContent } = useContextMenu({
+        onContextMenuHandler: ({ gesture, target }) => {
+            let idx;
+            let elementType = 'background';
+            const currentTarget = target;
+            if (gesture === 'keyboard') {
+                idx = focusedItemInfo.id;
+                elementType = focusedItemInfo.type;
+            }
+            else if (currentTarget.closest('[data-oj-private-node]')?.dataset['ojPrivateNode']) {
+                idx = currentTarget.closest('[data-oj-private-node]')?.dataset['ojPrivateNode'];
+                elementType = 'node';
+            }
+            else if (currentTarget.closest('[data-oj-private-link]')?.dataset['ojPrivateLink']) {
+                idx = currentTarget.closest('[data-oj-private-link]')?.dataset['ojPrivateLink'];
+                elementType = 'link';
+            }
+            else if (currentTarget.closest('[data-oj-private-promoted-link]')?.dataset['ojPrivatePromotedLink']) {
+                idx = currentTarget.closest('[data-oj-private-promoted-link]')?.dataset['ojPrivatePromotedLink'];
+                idx = promotedLinkMap.get(idx);
+                elementType = 'promotedLink';
+            }
+            const { context } = getDiagramContextMenuContext(nodesMap, linksMap, elementType, idx);
+            if (gesture === 'keyboard') {
+                let element;
+                if (focusedItemInfo.type === 'node') {
+                    element = rootRef.current?.querySelector(`[data-oj-private-node="${idx}"]`);
+                }
+                else if (focusedItemInfo.type === 'link') {
+                    element = rootRef.current?.querySelector(`[data-oj-private-link="${idx}"]`);
+                }
+                else {
+                    element = rootRef.current?.querySelector(`[data-oj-private-promoted-link="${getPromotedString(idx)}"]`);
+                }
+                return {
+                    type: 'element',
+                    context,
+                    elem: element ? element : null
+                };
+            }
+            return { type: 'pointer', context };
+        },
+        contextMenuOptions: {
+            isDisabled: !contextMenuConfig //If there is not a context menu renderer we disable the hook
+        },
+        rootRef,
+        contextMenuConfig,
+        onContextMenuDismissed
+    });
+    return { contextMenuContent, contextMenuProps };
+};
+
+const emptyKeys = { all: false, keys: new Set() };
+function BaseDiagramWithDimensions({ nodes = [], links = [], width, height, selectedIds = {}, selectionMode = 'none', layout, nodeRenderer, linkRenderer, onSelectionChange, onItemHover, onItemFocus, highlightedIds = {}, datatip, expanded = emptyKeys, onExpandedChange, contextMenuConfig, normalizeLinks, ...otherProps }) {
+    const focusedItemBoundsRef = useRef(null);
+    const rootRef = useRef(null);
+    const [bounds, setBounds] = useState(new Map());
+    const [absBounds, setAbsBounds] = useState(new Map());
+    const linkDimensions = useRef(new Map());
+    const promotedLinkDimensions = useRef(new Map());
+    const [combinedLabelBounds, setCombinedLabelBounds] = useState();
+    const { direction } = useUser();
+    const isRtl = direction === 'rtl';
+    const diagramNodes = nodes;
+    const nodeMap = createNodesMap(diagramNodes, expanded);
+    const nodeIdToParentMap = nodeMap.itemIdToParentMap;
+    const nodeIdToDataMap = nodeMap.itemIdToDataMap;
+    const diagramLinks = filterLinksWithNoStartOrEndNodes(links, nodeIdToDataMap);
+    const linkMap = createLinksMap(diagramLinks);
+    const linkIdToDataMap = linkMap.itemIdToDataMap;
+    const resizeThrottling = useRef(false);
+    const newDimensions = getDimensionsFromBounds(bounds);
+    const { textMeasureContent, getTextDimensions } = useTextDimensions();
+    const labelDimensions = useRef(new Map());
+    const linkDimsChanged = useRef(false);
+    const linkRerenderNeeded = useRef(false);
+    const nodeLabelPosRef = useRef(new Map());
+    const linkLabelPosRef = useRef(new Map());
+    const [layoutOutput, setLayoutOutput] = useState();
+    const nodeBoundsRef = useRef(new Map());
+    const promotedLinks = getPromotedLinks(links, expanded, nodeMap.allContainerNodes, nodeMap.allVisibleNodes);
+    const promotedLinkMap = createPromotedLinksMap(promotedLinks);
+    const contentBounds = getContentBounds(bounds, combinedLabelBounds);
+    const { panZoomProps, panProps, zoomProps, toggleButtonContent, cursor, centerX, centerY, zoomValue, kbPanCallback, kbZoomCallback } = usePanZoom({
+        props: otherProps,
+        captureTargetRef: rootRef,
+        width: width,
+        height: height,
+        contentBounds,
+        isRtl
+    });
+    const { touchResponse, touchResponseStyle } = useVisTouchResponse({
+        type: 'auto',
+        supportsTouchDragGestures: zoomProps.zooming === 'on' || panProps.panning !== 'off',
+        rootRef
+    });
+    const { onContextMenuDismissed, focusedItemInfo, hoveredItemInfo, activeId, eventsProps } = useEvents(touchResponse, diagramNodes[0], diagramNodes, diagramLinks, promotedLinks, absBounds, linkIdToDataMap, nodeIdToDataMap, width, height, otherProps.maxZoom || 1, expanded, nodeIdToParentMap, promotedLinkMap, onItemHover, onItemFocus, kbPanCallback, kbZoomCallback, onExpandedChange);
+    const { selectionProps, selectionContent } = useDiagramSelection({
+        selectedIds,
+        selectionMode,
+        nodeMap,
+        linkMap,
+        focusedItemInfo,
+        onSelectionChange,
+        rootRef,
+        promotedLinkMap
+    });
+    // This is for the datatip kb position
+    if (focusedItemInfo && absBounds.size > 0) {
+        focusedItemBoundsRef.current = getFocusedItemBounds(focusedItemInfo, absBounds, diagramLinks, linkMap.itemIdToIndexMap, rootRef);
+    }
+    const { datatipContent, datatipProps: { 'aria-describedby': datatipAriaDescribedby, ...datatipProps } } = useDiagramDatatip({
+        touchResponse,
+        datatip,
+        focusedItemInfo,
+        focusedItemBoundsRef,
+        panState: centerXYToPanXY(centerX, centerY, zoomValue, width, height),
+        zoom: zoomValue,
+        width: width,
+        nodesMap: nodeIdToDataMap,
+        linksMap: linkIdToDataMap,
+        hoveredItem: hoveredItemInfo
+    });
+    const [visibility, setVisibility] = useState('hidden');
+    const style = {
+        width: width,
+        height: height,
+        cursor: cursor,
+        visibility: visibility,
+        ...touchResponseStyle
+    };
+    // When expanded changes, diagram loses focus so we need to call re-render
+    const expandRerender = useRef(false);
+    useLayoutEffect(() => {
+        if (rootRef.current) {
+            expandRerender.current = true;
+        }
+    }, [expanded]);
+    useLayoutEffect(() => {
+        if (visibility === 'visible' && expandRerender.current == true) {
+            rootRef.current?.focus();
+            expandRerender.current = false;
+        }
+    }, [visibility]);
+    const states = useRef();
+    states.current = {
+        // update states to new state
+        selectedNodeIds: selectedIds.nodes ?? [],
+        selectedLinkIds: selectedIds.links ?? [],
+        selectedPromotedLinkIds: selectedIds.promotedLinks ?? [],
+        focusedId: focusedItemInfo.isCurrent && focusedItemInfo.isFocusVisible ? focusedItemInfo.id : undefined,
+        hoveredId: hoveredItemInfo?.isCurrent ? hoveredItemInfo.id : undefined,
+        activeId,
+        highlightedNodeIds: highlightedIds.nodes ?? [],
+        highlightedLinkIds: highlightedIds.links ?? [],
+        highlightedPromotedLinkIds: highlightedIds.promotedLinks ?? [],
+        zoom: zoomValue,
+        expanded: expanded || { all: false, keys: new Set() }
+    };
+    const { contextMenuContent, contextMenuProps } = useDiagramContextMenu({
+        focusedItemInfo,
+        rootRef,
+        contextMenuConfig: nodes.length > 0 ? contextMenuConfig : undefined,
+        onContextMenuDismissed,
+        nodesMap: nodeIdToDataMap,
+        linksMap: linkIdToDataMap,
+        promotedLinkMap
+    });
+    const mergedEventProps = mergeProps(panZoomProps, eventsProps, selectionProps, datatipProps, contextMenuProps);
+    // Called anytime node changes size
+    const onNodeSizeChanged = (nodeWidth, nodeHeight, id) => {
+        newDimensions.set(id, { width: nodeWidth, height: nodeHeight });
+        if (resizeThrottling.current) {
+            return;
+        }
+        resizeThrottling.current = true;
+        // performs layout at the next available animation frame when all measurements should be ready
+        window.requestAnimationFrame(() => {
+            const { labelDims, layoutJSON } = constructLayoutJSON(nodeIdToDataMap, linkIdToDataMap, promotedLinks, newDimensions, width, height, zoomValue, nodeIdToParentMap, rootRef, getTextDimensions);
+            labelDimensions.current = labelDims;
+            const layoutOutput = layout(layoutJSON);
+            const { nodePoints, nodeLabelPos, linkLabelPos } = deconstructLayoutJSON(layoutOutput, diagramNodes, diagramLinks);
+            nodeLabelPosRef.current = nodeLabelPos;
+            linkLabelPosRef.current = linkLabelPos;
+            const { nodeBounds, nodeAbsBounds } = mergeDimensions(newDimensions, nodePoints, rootRef);
+            const labelBounds = getAllLabelBounds(labelDims, nodeLabelPos, linkLabelPos, direction === 'rtl', rootRef);
+            const equalBounds = isEqualBounds(nodeBounds, bounds);
+            if (!equalBounds || linkDimsChanged.current || linkRerenderNeeded.current) {
+                linkRerenderNeeded.current = linkPositionChanged(nodeBounds, bounds, links);
+                setBounds(nodeBounds);
+                setAbsBounds(nodeAbsBounds);
+                setCombinedLabelBounds(labelBounds);
+                setLayoutOutput(layoutOutput);
+                linkDimsChanged.current = false;
+                setVisibility('hidden');
+            }
+            else if (visibility == 'hidden') {
+                setVisibility('visible');
+            }
+            resizeThrottling.current = false;
+        });
+    };
+    const onLinkSizeChanged = (linkWidth, linkHeight, id) => {
+        if (linkWidth !== 0 || linkHeight !== 0) {
+            const linkDims = linkDimensions.current.get(id);
+            if (!linkDims ||
+                (linkDims &&
+                    (Math.abs(linkWidth - linkDims.width) > 0.5 ||
+                        Math.abs(linkHeight - linkDims.height) > 0.5))) {
+                linkDimensions.current.set(id, { width: linkWidth, height: linkHeight });
+                linkDimsChanged.current = true;
+            }
+        }
+    };
+    const onPromotedLinkSizeChanged = (linkWidth, linkHeight, id) => {
+        if (linkWidth !== 0 || linkHeight !== 0) {
+            const linkDims = promotedLinkDimensions.current.get(id);
+            if (!linkDims ||
+                (linkDims &&
+                    (Math.abs(linkWidth - linkDims.width) > 0.5 ||
+                        Math.abs(linkHeight - linkDims.height) > 0.5))) {
+                promotedLinkDimensions.current.set(id, { width: linkWidth, height: linkHeight });
+                linkDimsChanged.current = true;
+            }
+        }
+    };
+    return (jsxs("div", { ref: rootRef, class: outerStyles, ...mergedEventProps, style: style, tabIndex: 0, role: "application", "aria-label": otherProps['aria-label'], "aria-labelledby": otherProps['aria-labelledby'], "aria-describedby": l([otherProps['aria-describedby'], datatipAriaDescribedby]), "aria-activedescendant": activeId, children: [getTextDimensions ? (jsx(DiagramPanZoomContainer, { centerX: centerX, centerY: centerY, zoom: zoomValue, width: width, height: height, children: jsx(DiagramLayers, { nodes: diagramNodes, links: diagramLinks, zoom: zoomValue, nodeRenderer: nodeRenderer, linkRenderer: linkRenderer, width: width, height: height, nodeBounds: bounds, linkDimensions: linkDimensions.current, promotedLinkDimensions: promotedLinkDimensions.current, states: states.current, onNodeSizeChanged: onNodeSizeChanged, onLinkSizeChanged: onLinkSizeChanged, onPromotedLinkSizeChanged: onPromotedLinkSizeChanged, nodeLabelPositions: nodeLabelPosRef.current, linkLabelPositions: linkLabelPosRef.current, labelDimensions: labelDimensions.current, supportsSelection: selectionMode !== 'none' ||
+                        !!(selectedIds?.nodes && selectedIds.nodes.length > 0) ||
+                        !!(selectedIds?.links && selectedIds.links.length > 0), layoutOutput: layoutOutput, nodeIdToParentMap: nodeIdToParentMap, rootRef: rootRef, combinedNodeBounds: contentBounds, nodeBoundsRef: nodeBoundsRef, promotedLinks: promotedLinks, normalizeLinks: normalizeLinks }) })) : undefined, textMeasureContent, datatipContent, contextMenuContent, selectionContent, toggleButtonContent] }));
+}
+
+/**
+ * Diagrams are used to display a set of nodes and the links between them.
+ */
+function BaseDiagram({ width, height, ...otherProps }) {
+    return otherProps.nodes && otherProps.nodes.length > 0 ? (jsx(TrackResizeContainer, { width: width, height: height, class: dimensionStyle, children: (width, height) => (jsx(BaseDiagramWithDimensions, { width: width, height: height, ...otherProps })) })) : null;
+}
+
+export { BaseDiagram as B };
+//# sourceMappingURL=BaseDiagram-19f481a0.js.map