@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/es/BaseDiagram-b5b22e53.js

@@ -1,2954 +0,0 @@
-/* @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-4822502f.js';
-import { u as useUser } from './useUser-06d34d19.js';
-import { E as EmbeddedIconButton } from './EmbeddedIconButton-46434710.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-4895a07a.js';
-import { u as useTextDimensions } from './useTextDimensions-45f79df4.js';
-import { i as isTouch } from './clientUtils-cccff45f.js';
-import { u as useVisDragModeControls } from './useVisDragModeControls-af64848c.js';
-import { u as useSelection } from './useSelection-82bec039.js';
-import { u as useVisTouchResponse } from './useVisTouchResponse-a59ab166.js';
-import { l } from './stringUtils-0fe25200.js';
-import { u as useContextMenu } from './useContextMenu-730d6c12.js';
-import './SelectMenuGroupContext-aa1fe822.js';
-import 'preact';
-import './logger-c92f309c.js';
-import './LayerHost-7931b424.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-af0abd38.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-b5b22e53.js.map