@uipath/apollo-react 3.44.0 → 3.44.2

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -97,7 +97,7 @@ const StageNodeComponent = (props)=>{
                 taskIndex: pendingReplaceTask.taskIndex
             };
             setIsReplacingTask(true);
-        }
+        } else setIsReplacingTask(false);
     }, [
         pendingReplaceTask,
         tasks
@@ -201,7 +201,10 @@ const StageNodeComponent = (props)=>{
     ]);
     const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
-        if (onReplaceTaskFromToolbox) items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace Task', ()=>setIsReplacingTask(true)));
+        if (onReplaceTaskFromToolbox) {
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>setIsReplacingTask(true)));
+            items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
+        }
         if (onTaskGroupModification) {
             const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
             return [
@@ -252,13 +255,16 @@ const StageNodeComponent = (props)=>{
     ]);
     const handleReplaceTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
         setIsReplacingTask(true);
+        const groupIndex = taskStateReference.current.groupIndex;
+        const taskIndex = taskStateReference.current.taskIndex;
+        const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+        if (taskId) onTaskClick?.(taskId);
         onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
         setIsReplacingTask(false);
-        setSelectedNodeId(id);
     }, [
         onReplaceTaskFromToolbox,
-        setSelectedNodeId,
-        id
+        onTaskClick,
+        tasks
     ]);
     const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>isException ? [] : [
             {

package/dist/canvas/components/StageNode/StageNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4oBxD,eAAO,MAAM,SAAS,8CAloBa,cAAc,6CAkoBA,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkpBxD,eAAO,MAAM,SAAS,8CAxoBa,cAAc,6CAwoBA,CAAC"}

package/dist/canvas/components/StageNode/StageNode.js

@@ -17,7 +17,7 @@ import { Toolbox } from "../Toolbox/index.js";
 import { DraggableTask, TaskContent } from "./DraggableTask.js";
 import { INDENTATION_WIDTH, STAGE_CONTENT_INSET, StageContainer, StageContent, StageHeader, StageParallelBracket, StageParallelLabel, StageTask, StageTaskGroup, StageTaskList, StageTitleContainer, StageTitleInput } from "./StageNode.styles.js";
 import { flattenTasks, getProjection, reorderTasks } from "./StageNode.utils.js";
-import { getContextMenuItems, getMenuItem } from "./StageNodeTaskUtilities.js";
+import { getContextMenuItems, getDivider, getMenuItem } from "./StageNodeTaskUtilities.js";
 const StageNodeComponent = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox } = props;
     const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
@@ -69,7 +69,7 @@ const StageNodeComponent = (props)=>{
                 taskIndex: pendingReplaceTask.taskIndex
             };
             setIsReplacingTask(true);
-        }
+        } else setIsReplacingTask(false);
     }, [
         pendingReplaceTask,
         tasks
@@ -173,7 +173,10 @@ const StageNodeComponent = (props)=>{
     ]);
     const contextMenuItems = useCallback((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
         const items = [];
-        if (onReplaceTaskFromToolbox) items.push(getMenuItem('replace-task', 'Replace Task', ()=>setIsReplacingTask(true)));
+        if (onReplaceTaskFromToolbox) {
+            items.push(getMenuItem('replace-task', 'Replace task', ()=>setIsReplacingTask(true)));
+            items.push(getDivider());
+        }
         if (onTaskGroupModification) {
             const reGroupOptions = getContextMenuItems(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
             return [
@@ -224,13 +227,16 @@ const StageNodeComponent = (props)=>{
     ]);
     const handleReplaceTaskToolboxItemSelected = useCallback((item)=>{
         setIsReplacingTask(true);
+        const groupIndex = taskStateReference.current.groupIndex;
+        const taskIndex = taskStateReference.current.taskIndex;
+        const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+        if (taskId) onTaskClick?.(taskId);
         onReplaceTaskFromToolbox?.(item, taskStateReference.current.groupIndex, taskStateReference.current.taskIndex);
         setIsReplacingTask(false);
-        setSelectedNodeId(id);
     }, [
         onReplaceTaskFromToolbox,
-        setSelectedNodeId,
-        id
+        onTaskClick,
+        tasks
     ]);
     const handleConfigurations = useMemo(()=>isException ? [] : [
             {

package/dist/canvas/components/StageNode/StageNodeTaskUtilities.cjs

@@ -24,15 +24,16 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    getDivider: ()=>getDivider,
+    getMenuItem: ()=>getMenuItem,
     transformMenuItems: ()=>transformMenuItems,
-    getContextMenuItems: ()=>getContextMenuItems,
-    getMenuItem: ()=>getMenuItem
+    getContextMenuItems: ()=>getContextMenuItems
 });
 const GroupModificationUtils_cjs_namespaceObject = require("../../utils/GroupModificationUtils.cjs");
 const getContextMenuItems = (isParallelGroup, groupIndex, tasksLength, taskIndex, _taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction)=>{
     const CONTEXT_MENU_ITEMS = {
-        MOVE_UP: getMenuItem('move-up', 'Move Up', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_UP, groupIndex, taskIndex)),
-        MOVE_DOWN: getMenuItem('move-down', 'Move Down', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_DOWN, groupIndex, taskIndex)),
+        MOVE_UP: getMenuItem('move-up', 'Move up', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_UP, groupIndex, taskIndex)),
+        MOVE_DOWN: getMenuItem('move-down', 'Move down', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.TASK_GROUP_DOWN, groupIndex, taskIndex)),
         UNGROUP_ALL: getMenuItem('ungroup', 'Ungroup parallel tasks', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.UNGROUP_ALL_TASKS, groupIndex, taskIndex)),
         SPLIT_TASK: getMenuItem('split', 'Remove from parallel group', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.SPLIT_GROUP, groupIndex, taskIndex)),
         REMOVE_GROUP: getMenuItem('remove-group', 'Remove group from stage', ()=>reGroupTaskFunction(GroupModificationUtils_cjs_namespaceObject.GroupModificationType.REMOVE_GROUP, groupIndex, taskIndex)),
@@ -87,10 +88,12 @@ const transformMenuItems = (menuItems, onItemClick)=>{
     });
 };
 exports.getContextMenuItems = __webpack_exports__.getContextMenuItems;
+exports.getDivider = __webpack_exports__.getDivider;
 exports.getMenuItem = __webpack_exports__.getMenuItem;
 exports.transformMenuItems = __webpack_exports__.transformMenuItems;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "getContextMenuItems",
+    "getDivider",
     "getMenuItem",
     "transformMenuItems"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];

package/dist/canvas/components/StageNode/StageNodeTaskUtilities.d.ts

@@ -3,6 +3,7 @@ import { GroupModificationType } from '../../utils/GroupModificationUtils';
 import type { NodeMenuAction, NodeMenuItem } from '../NodeContextMenu';
 export declare const getContextMenuItems: (isParallelGroup: boolean, groupIndex: number, tasksLength: number, taskIndex: number, _taskGroupLength: number, isAboveParallel: boolean, isBelowParallel: boolean, reGroupTaskFunction: (groupModificationType: GroupModificationType, groupIndex: number, taskIndex: number) => void) => NodeMenuItem[];
 export declare function getMenuItem(id: string | undefined, label: string | undefined, onClick: () => void, isDisabled?: boolean): NodeMenuItem;
+export declare const getDivider: () => NodeMenuItem;
 export interface TransformedMenuItem {
     key: string;
     title?: string;

package/dist/canvas/components/StageNode/StageNodeTaskUtilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageNodeTaskUtilities.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeTaskUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvE,eAAO,MAAM,mBAAmB,GAC9B,iBAAiB,OAAO,EACxB,YAAY,MAAM,EAClB,aAAa,MAAM,EACnB,WAAW,MAAM,EACjB,kBAAkB,MAAM,EACxB,iBAAiB,OAAO,EACxB,iBAAiB,OAAO,EACxB,qBAAqB,CACnB,qBAAqB,EAAE,qBAAqB,EAC5C,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,KACd,IAAI,KACR,YAAY,EAiFd,CAAC;AAEF,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,YAAO,EACjB,KAAK,EAAE,MAAM,YAAU,EACvB,OAAO,EAAE,MAAM,IAAI,EACnB,UAAU,UAAQ,GACjB,YAAY,CAEd;AAQD,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAMD,eAAO,MAAM,kBAAkB,GAC7B,WAAW,YAAY,EAAE,GAAG,SAAS,EACrC,aAAa,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,KAC1C,mBAAmB,EAwBrB,CAAC"}
+{"version":3,"file":"StageNodeTaskUtilities.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNodeTaskUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvE,eAAO,MAAM,mBAAmB,GAC9B,iBAAiB,OAAO,EACxB,YAAY,MAAM,EAClB,aAAa,MAAM,EACnB,WAAW,MAAM,EACjB,kBAAkB,MAAM,EACxB,iBAAiB,OAAO,EACxB,iBAAiB,OAAO,EACxB,qBAAqB,CACnB,qBAAqB,EAAE,qBAAqB,EAC5C,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,KACd,IAAI,KACR,YAAY,EAiFd,CAAC;AAEF,wBAAgB,WAAW,CACzB,EAAE,EAAE,MAAM,YAAO,EACjB,KAAK,EAAE,MAAM,YAAU,EACvB,OAAO,EAAE,MAAM,IAAI,EACnB,UAAU,UAAQ,GACjB,YAAY,CAEd;AAED,eAAO,MAAM,UAAU,QAAO,YAI7B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAMD,eAAO,MAAM,kBAAkB,GAC7B,WAAW,YAAY,EAAE,GAAG,SAAS,EACrC,aAAa,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,KAC1C,mBAAmB,EAwBrB,CAAC"}

package/dist/canvas/components/StageNode/StageNodeTaskUtilities.js

@@ -1,8 +1,8 @@
 import { GroupModificationType } from "../../utils/GroupModificationUtils.js";
 const getContextMenuItems = (isParallelGroup, groupIndex, tasksLength, taskIndex, _taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction)=>{
     const CONTEXT_MENU_ITEMS = {
-        MOVE_UP: getMenuItem('move-up', 'Move Up', ()=>reGroupTaskFunction(GroupModificationType.TASK_GROUP_UP, groupIndex, taskIndex)),
-        MOVE_DOWN: getMenuItem('move-down', 'Move Down', ()=>reGroupTaskFunction(GroupModificationType.TASK_GROUP_DOWN, groupIndex, taskIndex)),
+        MOVE_UP: getMenuItem('move-up', 'Move up', ()=>reGroupTaskFunction(GroupModificationType.TASK_GROUP_UP, groupIndex, taskIndex)),
+        MOVE_DOWN: getMenuItem('move-down', 'Move down', ()=>reGroupTaskFunction(GroupModificationType.TASK_GROUP_DOWN, groupIndex, taskIndex)),
         UNGROUP_ALL: getMenuItem('ungroup', 'Ungroup parallel tasks', ()=>reGroupTaskFunction(GroupModificationType.UNGROUP_ALL_TASKS, groupIndex, taskIndex)),
         SPLIT_TASK: getMenuItem('split', 'Remove from parallel group', ()=>reGroupTaskFunction(GroupModificationType.SPLIT_GROUP, groupIndex, taskIndex)),
         REMOVE_GROUP: getMenuItem('remove-group', 'Remove group from stage', ()=>reGroupTaskFunction(GroupModificationType.REMOVE_GROUP, groupIndex, taskIndex)),
@@ -56,4 +56,4 @@ const transformMenuItems = (menuItems, onItemClick)=>{
         };
     });
 };
-export { getContextMenuItems, getMenuItem, transformMenuItems };
+export { getContextMenuItems, getDivider, getMenuItem, transformMenuItems };

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs

@@ -71,15 +71,20 @@ const StyledSankeyLink = (0, styles_namespaceObject.styled)('path')({
         opacity: 1
     }
 });
+const LABEL_FONT_SIZE = apollo_core_default().FontVariantToken.fontSizeL;
+const LABEL_FONT_FAMILY = apollo_core_default().FontFamily.FontNormal;
+const LABEL_CSS_FONT = `${apollo_core_default().Typography.fontSizeL.fontWeight} ${apollo_core_default().Typography.fontSizeL.fontSize} ${LABEL_FONT_FAMILY}`;
 const StyledSankeyNodeLabel = (0, styles_namespaceObject.styled)('text')({
-    fontSize: apollo_core_default().FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
     userSelect: 'none',
     cursor: 'default'
 });
 const StyledSankeyNodeValue = (0, styles_namespaceObject.styled)('text')({
-    fontSize: apollo_core_default().FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fontWeight: apollo_core_default().FontFamily.FontWeightMedium,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
@@ -116,11 +121,21 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
 });
-const DIAGRAM_MARGIN_HORIZONTAL = 80;
+const DIAGRAM_MARGIN_LEFT = 5;
+const DIAGRAM_MARGIN_RIGHT = 120;
 const DIAGRAM_MARGIN_VERTICAL = 5;
-const truncateText = (text, maxChars)=>{
-    if (text.length <= maxChars) return text;
-    return `${text.substring(0, maxChars - 1)}…`;
+const truncateToFit = (text, maxWidth, ctx)=>{
+    if (maxWidth <= 0) return '';
+    if (ctx.measureText(text).width <= maxWidth) return text;
+    const ellipsis = '\u2026';
+    let lo = 0;
+    let hi = text.length;
+    while(lo < hi){
+        const mid = Math.ceil((lo + hi) / 2);
+        if (ctx.measureText(text.substring(0, mid) + ellipsis).width <= maxWidth) lo = mid;
+        else hi = mid - 1;
+    }
+    return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
 };
 const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
     const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
@@ -164,11 +179,11 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
         const alignmentFn = 'left' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyLeft : 'right' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyRight : 'center' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyCenter : external_d3_sankey_namespaceObject.sankeyJustify;
         const sankeyGenerator = (0, external_d3_sankey_namespaceObject.sankey)().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
             [
-                DIAGRAM_MARGIN_HORIZONTAL,
+                DIAGRAM_MARGIN_LEFT,
                 DIAGRAM_MARGIN_VERTICAL
             ],
             [
-                actualWidth - DIAGRAM_MARGIN_HORIZONTAL,
+                actualWidth - DIAGRAM_MARGIN_RIGHT,
                 actualHeight - DIAGRAM_MARGIN_VERTICAL
             ]
         ]);
@@ -233,20 +248,29 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
     ]);
     const nodeData = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!sankeyGraph) return [];
-        const midpoint = actualWidth / 2;
+        const labelPad = parseInt(apollo_core_default().Spacing.SpacingXs, 10);
+        const ctx = 'undefined' != typeof document ? document.createElement('canvas').getContext('2d') : null;
+        if (ctx) ctx.font = LABEL_CSS_FONT;
+        const columnSet = new Map();
+        for (const n of sankeyGraph.nodes){
+            const ext = n;
+            const x0 = ext.x0 || 0;
+            const x1 = ext.x1 || 0;
+            if (!columnSet.has(x0)) columnSet.set(x0, x1);
+        }
+        const columns = Array.from(columnSet.entries()).map(([x0, x1])=>({
+                x0,
+                x1
+            })).sort((a, b)=>a.x0 - b.x0);
         return sankeyGraph.nodes.map((node, index)=>{
             const extNode = node;
             const x0 = extNode.x0 || 0;
             const x1 = extNode.x1 || 0;
             const y0 = extNode.y0 || 0;
             const y1 = extNode.y1 || 0;
-            const nodeCenter = (x0 + x1) / 2;
-            const labelOnRight = nodeCenter < midpoint;
-            const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core_default().Spacing.SpacingXs);
-            const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core_default().Spacing.SpacingXs);
-            const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
-            const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core_default().Spacing.SpacingXs));
-            const displayLabel = truncateText(extNode.label, maxChars);
+            const colIndex = columns.findIndex((col)=>col.x0 === x0);
+            const nextCol = columns[colIndex + 1];
+            const displayLabel = nextCol && ctx ? truncateToFit(extNode.label, Math.max(0, nextCol.x0 - x1 - labelPad), ctx) : extNode.label;
             return {
                 node: extNode,
                 x: x0,
@@ -254,9 +278,9 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                 width: x1 - x0,
                 height: y1 - y0,
                 color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
-                labelX: labelOnRight ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
+                labelX: x1 + labelPad,
                 labelY: (y0 + y1) / 2,
-                labelAnchor: labelOnRight ? 'start' : 'end',
+                labelAnchor: 'start',
                 value: extNode.value || 0,
                 displayLabel,
                 fullLabel: extNode.label
@@ -265,8 +289,7 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
     }, [
         sankeyGraph,
         nodeColorMap,
-        colorScheme,
-        actualWidth
+        colorScheme
     ]);
     const handleLinkMouseEnter = (0, external_react_namespaceObject.useCallback)((index, centerX, centerY)=>{
         if (selectedLinkIndex === index) return;
@@ -393,7 +416,7 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                                     }),
                                     nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
                                         x: nodeItem.labelX,
-                                        y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM),
+                                        y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM, 10),
                                         dy: "0.35em",
                                         textAnchor: nodeItem.labelAnchor,
                                         children: nodeItem.value

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAeA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,yBAAyB,CAAC;AAqI5F,eAAO,MAAM,eAAe,6FAqb3B,CAAC"}
+{"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAeA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,yBAAyB,CAAC;AA4J5F,eAAO,MAAM,eAAe,6FAsb3B,CAAC"}

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js

@@ -32,15 +32,20 @@ const StyledSankeyLink = styled('path')({
         opacity: 1
     }
 });
+const LABEL_FONT_SIZE = apollo_core.FontVariantToken.fontSizeL;
+const LABEL_FONT_FAMILY = apollo_core.FontFamily.FontNormal;
+const LABEL_CSS_FONT = `${apollo_core.Typography.fontSizeL.fontWeight} ${apollo_core.Typography.fontSizeL.fontSize} ${LABEL_FONT_FAMILY}`;
 const StyledSankeyNodeLabel = styled('text')({
-    fontSize: apollo_core.FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
     userSelect: 'none',
     cursor: 'default'
 });
 const StyledSankeyNodeValue = styled('text')({
-    fontSize: apollo_core.FontVariantToken.fontSizeS,
+    fontSize: LABEL_FONT_SIZE,
+    fontFamily: LABEL_FONT_FAMILY,
     fontWeight: apollo_core.FontFamily.FontWeightMedium,
     fill: 'var(--color-foreground-emp)',
     pointerEvents: 'auto',
@@ -77,11 +82,21 @@ const TooltipValue = styled('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core.FontFamily.FontWeightSemibold
 });
-const DIAGRAM_MARGIN_HORIZONTAL = 80;
+const DIAGRAM_MARGIN_LEFT = 5;
+const DIAGRAM_MARGIN_RIGHT = 120;
 const DIAGRAM_MARGIN_VERTICAL = 5;
-const truncateText = (text, maxChars)=>{
-    if (text.length <= maxChars) return text;
-    return `${text.substring(0, maxChars - 1)}…`;
+const truncateToFit = (text, maxWidth, ctx)=>{
+    if (maxWidth <= 0) return '';
+    if (ctx.measureText(text).width <= maxWidth) return text;
+    const ellipsis = '\u2026';
+    let lo = 0;
+    let hi = text.length;
+    while(lo < hi){
+        const mid = Math.ceil((lo + hi) / 2);
+        if (ctx.measureText(text.substring(0, mid) + ellipsis).width <= maxWidth) lo = mid;
+        else hi = mid - 1;
+    }
+    return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
 };
 const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
@@ -125,11 +140,11 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
         const alignmentFn = 'left' === nodeAlignment ? sankeyLeft : 'right' === nodeAlignment ? sankeyRight : 'center' === nodeAlignment ? sankeyCenter : sankeyJustify;
         const sankeyGenerator = sankey().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
             [
-                DIAGRAM_MARGIN_HORIZONTAL,
+                DIAGRAM_MARGIN_LEFT,
                 DIAGRAM_MARGIN_VERTICAL
             ],
             [
-                actualWidth - DIAGRAM_MARGIN_HORIZONTAL,
+                actualWidth - DIAGRAM_MARGIN_RIGHT,
                 actualHeight - DIAGRAM_MARGIN_VERTICAL
             ]
         ]);
@@ -194,20 +209,29 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     ]);
     const nodeData = useMemo(()=>{
         if (!sankeyGraph) return [];
-        const midpoint = actualWidth / 2;
+        const labelPad = parseInt(apollo_core.Spacing.SpacingXs, 10);
+        const ctx = 'undefined' != typeof document ? document.createElement('canvas').getContext('2d') : null;
+        if (ctx) ctx.font = LABEL_CSS_FONT;
+        const columnSet = new Map();
+        for (const n of sankeyGraph.nodes){
+            const ext = n;
+            const x0 = ext.x0 || 0;
+            const x1 = ext.x1 || 0;
+            if (!columnSet.has(x0)) columnSet.set(x0, x1);
+        }
+        const columns = Array.from(columnSet.entries()).map(([x0, x1])=>({
+                x0,
+                x1
+            })).sort((a, b)=>a.x0 - b.x0);
         return sankeyGraph.nodes.map((node, index)=>{
             const extNode = node;
             const x0 = extNode.x0 || 0;
             const x1 = extNode.x1 || 0;
             const y0 = extNode.y0 || 0;
             const y1 = extNode.y1 || 0;
-            const nodeCenter = (x0 + x1) / 2;
-            const labelOnRight = nodeCenter < midpoint;
-            const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core.Spacing.SpacingXs);
-            const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core.Spacing.SpacingXs);
-            const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
-            const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core.Spacing.SpacingXs));
-            const displayLabel = truncateText(extNode.label, maxChars);
+            const colIndex = columns.findIndex((col)=>col.x0 === x0);
+            const nextCol = columns[colIndex + 1];
+            const displayLabel = nextCol && ctx ? truncateToFit(extNode.label, Math.max(0, nextCol.x0 - x1 - labelPad), ctx) : extNode.label;
             return {
                 node: extNode,
                 x: x0,
@@ -215,9 +239,9 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                 width: x1 - x0,
                 height: y1 - y0,
                 color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
-                labelX: labelOnRight ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
+                labelX: x1 + labelPad,
                 labelY: (y0 + y1) / 2,
-                labelAnchor: labelOnRight ? 'start' : 'end',
+                labelAnchor: 'start',
                 value: extNode.value || 0,
                 displayLabel,
                 fullLabel: extNode.label
@@ -226,8 +250,7 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     }, [
         sankeyGraph,
         nodeColorMap,
-        colorScheme,
-        actualWidth
+        colorScheme
     ]);
     const handleLinkMouseEnter = useCallback((index, centerX, centerY)=>{
         if (selectedLinkIndex === index) return;
@@ -354,7 +377,7 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                                     }),
                                     nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
                                         x: nodeItem.labelX,
-                                        y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM),
+                                        y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM, 10),
                                         dy: "0.35em",
                                         textAnchor: nodeItem.labelAnchor,
                                         children: nodeItem.value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.44.0",
+  "version": "3.44.2",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",