@uipath/apollo-react 3.29.0 → 3.29.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs +34 -13
  2. package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map +1 -1
  3. package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js +34 -13
  4. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs +31 -11
  5. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map +1 -1
  6. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js +31 -11
  7. package/package.json +1 -1
package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs CHANGED
@@ -27,11 +27,13 @@ __webpack_require__.d(__webpack_exports__, {
27
27
  SuggestionGroupPanel: ()=>SuggestionGroupPanel
28
28
  });
29
29
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
+ const material_namespaceObject = require("@mui/material");
30
31
  const apollo_core_namespaceObject = require("@uipath/apollo-core");
31
32
  const index_cjs_namespaceObject = require("../../../layouts/index.cjs");
33
+ const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
32
34
  const external_material_index_cjs_namespaceObject = require("../../../../material/index.cjs");
33
35
  const external_react_namespaceObject = require("react");
34
- const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
36
+ const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
35
37
  variant: "tertiary",
36
38
  size: "small",
37
39
  label: "Reject all",
@@ -39,9 +41,13 @@ const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_ru
39
41
  variant: "outlined",
40
42
  name: "close"
41
43
  }),
42
- onClick: ()=>onClick(suggestionGroup.id)
44
+ onClick: ()=>onClick(suggestionGroup.id),
45
+ sx: compact ? {
46
+ fontSize: '0.75rem',
47
+ minWidth: 'auto'
48
+ } : void 0
43
49
  });
44
- const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
50
+ const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
45
51
  variant: "primary",
46
52
  size: "small",
47
53
  label: "Accept all",
@@ -49,7 +55,11 @@ const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_ru
49
55
  variant: "outlined",
50
56
  name: "check"
51
57
  }),
52
- onClick: ()=>onClick(suggestionGroup.id)
58
+ onClick: ()=>onClick(suggestionGroup.id),
59
+ sx: compact ? {
60
+ fontSize: '0.75rem',
61
+ minWidth: 'auto'
62
+ } : void 0
53
63
  });
54
64
  const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
55
65
  style: {
@@ -58,15 +68,16 @@ const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
58
68
  backgroundColor: 'var(--uix-canvas-border)'
59
69
  }
60
70
  });
61
- const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious })=>{
71
+ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
62
72
  const [isHoveringUp, setIsHoveringUp] = (0, external_react_namespaceObject.useState)(false);
63
73
  const [isHoveringDown, setIsHoveringDown] = (0, external_react_namespaceObject.useState)(false);
74
+ const iconSize = compact ? '16px' : '20px';
64
75
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
65
76
  style: {
66
77
  display: 'flex',
67
78
  alignItems: 'center',
68
79
  gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
69
- minWidth: '100px'
80
+ minWidth: compact ? '80px' : '100px'
70
81
  },
71
82
  children: [
72
83
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
@@ -76,11 +87,11 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
76
87
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
77
88
  name: "keyboard_arrow_up",
78
89
  color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
79
- size: "20px"
90
+ size: iconSize
80
91
  })
81
92
  }),
82
93
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_material_index_cjs_namespaceObject.ApTypography, {
83
- variant: apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
94
+ variant: compact ? apollo_core_namespaceObject.FontVariantToken.fontSizeSBold : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
84
95
  color: "var(--uix-canvas-foreground-de-emp)",
85
96
  children: [
86
97
  currentIndex + 1,
@@ -95,13 +106,17 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
95
106
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
96
107
  name: "keyboard_arrow_down",
97
108
  color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
98
- size: "20px"
109
+ size: iconSize
99
110
  })
100
111
  })
101
112
  ]
102
113
  });
103
114
  };
104
115
  const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, currentIndex = 0, onNavigateNext, onNavigatePrevious })=>{
116
+ const theme = (0, material_namespaceObject.useTheme)();
117
+ const canvasWidth = (0, react_cjs_namespaceObject.useStore)((state)=>state.width);
118
+ const smBreakpoint = theme.breakpoints.values.sm;
119
+ const isCompact = canvasWidth < smBreakpoint;
105
120
  const nonStandaloneSuggestions = suggestionGroup?.suggestions.filter((s)=>!s.isStandalone) ?? [];
106
121
  const placeholderCount = nonStandaloneSuggestions.length;
107
122
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
@@ -118,23 +133,29 @@ const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, curre
118
133
  },
119
134
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
120
135
  align: "center",
121
- gap: apollo_core_namespaceObject.Spacing.SpacingS,
136
+ gap: isCompact ? apollo_core_namespaceObject.Spacing.SpacingXs : apollo_core_namespaceObject.Spacing.SpacingS,
122
137
  justify: "space-evenly",
138
+ style: {
139
+ whiteSpace: 'nowrap'
140
+ },
123
141
  children: [
124
142
  onRejectAll && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RejectAllButton, {
125
143
  suggestionGroup: suggestionGroup,
126
- onClick: onRejectAll
144
+ onClick: onRejectAll,
145
+ compact: isCompact
127
146
  }),
128
147
  onAcceptAll && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AcceptAllButton, {
129
148
  suggestionGroup: suggestionGroup,
130
- onClick: onAcceptAll
149
+ onClick: onAcceptAll,
150
+ compact: isCompact
131
151
  }),
132
152
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Divider, {}),
133
153
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SuggestionGroupNavigator, {
134
154
  currentIndex: currentIndex,
135
155
  total: placeholderCount,
136
156
  onNavigateNext: onNavigateNext,
137
- onNavigatePrevious: onNavigatePrevious
157
+ onNavigatePrevious: onNavigatePrevious,
158
+ compact: isCompact
138
159
  })
139
160
  ]
140
161
  })
package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAgGD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CAwC3B,CAAC"}
1
+ {"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAuGD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CA2D3B,CAAC"}
package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { useTheme } from "@mui/material";
2
3
  import { FontVariantToken, Spacing } from "@uipath/apollo-core";
3
4
  import { Column, Row } from "../../../layouts/index.js";
5
+ import { useStore } from "../../../xyflow/react.js";
4
6
  import { ApButton, ApIcon, ApIconButton, ApTypography } from "../../../../material/index.js";
5
7
  import { useState } from "react";
6
- const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButton, {
8
+ const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsx(ApButton, {
7
9
  variant: "tertiary",
8
10
  size: "small",
9
11
  label: "Reject all",
@@ -11,9 +13,13 @@ const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButt
11
13
  variant: "outlined",
12
14
  name: "close"
13
15
  }),
14
- onClick: ()=>onClick(suggestionGroup.id)
16
+ onClick: ()=>onClick(suggestionGroup.id),
17
+ sx: compact ? {
18
+ fontSize: '0.75rem',
19
+ minWidth: 'auto'
20
+ } : void 0
15
21
  });
16
- const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButton, {
22
+ const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsx(ApButton, {
17
23
  variant: "primary",
18
24
  size: "small",
19
25
  label: "Accept all",
@@ -21,7 +27,11 @@ const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButt
21
27
  variant: "outlined",
22
28
  name: "check"
23
29
  }),
24
- onClick: ()=>onClick(suggestionGroup.id)
30
+ onClick: ()=>onClick(suggestionGroup.id),
31
+ sx: compact ? {
32
+ fontSize: '0.75rem',
33
+ minWidth: 'auto'
34
+ } : void 0
25
35
  });
26
36
  const Divider = ()=>/*#__PURE__*/ jsx("div", {
27
37
  style: {
@@ -30,15 +40,16 @@ const Divider = ()=>/*#__PURE__*/ jsx("div", {
30
40
  backgroundColor: 'var(--uix-canvas-border)'
31
41
  }
32
42
  });
33
- const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious })=>{
43
+ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
34
44
  const [isHoveringUp, setIsHoveringUp] = useState(false);
35
45
  const [isHoveringDown, setIsHoveringDown] = useState(false);
46
+ const iconSize = compact ? '16px' : '20px';
36
47
  return /*#__PURE__*/ jsxs("div", {
37
48
  style: {
38
49
  display: 'flex',
39
50
  alignItems: 'center',
40
51
  gap: Spacing.SpacingMicro,
41
- minWidth: '100px'
52
+ minWidth: compact ? '80px' : '100px'
42
53
  },
43
54
  children: [
44
55
  /*#__PURE__*/ jsx(ApIconButton, {
@@ -48,11 +59,11 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
48
59
  children: /*#__PURE__*/ jsx(ApIcon, {
49
60
  name: "keyboard_arrow_up",
50
61
  color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
51
- size: "20px"
62
+ size: iconSize
52
63
  })
53
64
  }),
54
65
  /*#__PURE__*/ jsxs(ApTypography, {
55
- variant: FontVariantToken.fontSizeMBold,
66
+ variant: compact ? FontVariantToken.fontSizeSBold : FontVariantToken.fontSizeMBold,
56
67
  color: "var(--uix-canvas-foreground-de-emp)",
57
68
  children: [
58
69
  currentIndex + 1,
@@ -67,13 +78,17 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
67
78
  children: /*#__PURE__*/ jsx(ApIcon, {
68
79
  name: "keyboard_arrow_down",
69
80
  color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
70
- size: "20px"
81
+ size: iconSize
71
82
  })
72
83
  })
73
84
  ]
74
85
  });
75
86
  };
76
87
  const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, currentIndex = 0, onNavigateNext, onNavigatePrevious })=>{
88
+ const theme = useTheme();
89
+ const canvasWidth = useStore((state)=>state.width);
90
+ const smBreakpoint = theme.breakpoints.values.sm;
91
+ const isCompact = canvasWidth < smBreakpoint;
77
92
  const nonStandaloneSuggestions = suggestionGroup?.suggestions.filter((s)=>!s.isStandalone) ?? [];
78
93
  const placeholderCount = nonStandaloneSuggestions.length;
79
94
  return /*#__PURE__*/ jsx(Fragment, {
@@ -90,23 +105,29 @@ const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, curre
90
105
  },
91
106
  children: /*#__PURE__*/ jsxs(Row, {
92
107
  align: "center",
93
- gap: Spacing.SpacingS,
108
+ gap: isCompact ? Spacing.SpacingXs : Spacing.SpacingS,
94
109
  justify: "space-evenly",
110
+ style: {
111
+ whiteSpace: 'nowrap'
112
+ },
95
113
  children: [
96
114
  onRejectAll && /*#__PURE__*/ jsx(RejectAllButton, {
97
115
  suggestionGroup: suggestionGroup,
98
- onClick: onRejectAll
116
+ onClick: onRejectAll,
117
+ compact: isCompact
99
118
  }),
100
119
  onAcceptAll && /*#__PURE__*/ jsx(AcceptAllButton, {
101
120
  suggestionGroup: suggestionGroup,
102
- onClick: onAcceptAll
121
+ onClick: onAcceptAll,
122
+ compact: isCompact
103
123
  }),
104
124
  /*#__PURE__*/ jsx(Divider, {}),
105
125
  /*#__PURE__*/ jsx(SuggestionGroupNavigator, {
106
126
  currentIndex: currentIndex,
107
127
  total: placeholderCount,
108
128
  onNavigateNext: onNavigateNext,
109
- onNavigatePrevious: onNavigatePrevious
129
+ onNavigatePrevious: onNavigatePrevious,
130
+ compact: isCompact
110
131
  })
111
132
  ]
112
133
  })
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs CHANGED
@@ -74,15 +74,17 @@ const StyledSankeyLink = (0, styles_namespaceObject.styled)('path')({
74
74
  const StyledSankeyNodeLabel = (0, styles_namespaceObject.styled)('text')({
75
75
  fontSize: apollo_core_default().FontVariantToken.fontSizeS,
76
76
  fill: 'var(--color-foreground-emp)',
77
- pointerEvents: 'none',
78
- userSelect: 'none'
77
+ pointerEvents: 'auto',
78
+ userSelect: 'none',
79
+ cursor: 'default'
79
80
  });
80
81
  const StyledSankeyNodeValue = (0, styles_namespaceObject.styled)('text')({
81
82
  fontSize: apollo_core_default().FontVariantToken.fontSizeS,
82
83
  fontWeight: apollo_core_default().FontFamily.FontWeightMedium,
83
84
  fill: 'var(--color-foreground-emp)',
84
- pointerEvents: 'none',
85
- userSelect: 'none'
85
+ pointerEvents: 'auto',
86
+ userSelect: 'none',
87
+ cursor: 'default'
86
88
  });
87
89
  const LinkTooltipContent = (0, styles_namespaceObject.styled)(material_namespaceObject.Paper)({
88
90
  backgroundColor: 'var(--color-background)',
@@ -114,8 +116,12 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
114
116
  color: 'var(--color-foreground-emp)',
115
117
  fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
116
118
  });
117
- const DIAGRAM_MARGIN_HORIZONTAL = 1;
119
+ const DIAGRAM_MARGIN_HORIZONTAL = 80;
118
120
  const DIAGRAM_MARGIN_VERTICAL = 5;
121
+ const truncateText = (text, maxChars)=>{
122
+ if (text.length <= maxChars) return text;
123
+ return `${text.substring(0, maxChars - 1)}…`;
124
+ };
119
125
  const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
120
126
  const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
121
127
  const containerRef = (0, external_react_namespaceObject.useRef)(null);
@@ -227,13 +233,20 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
227
233
  ]);
228
234
  const nodeData = (0, external_react_namespaceObject.useMemo)(()=>{
229
235
  if (!sankeyGraph) return [];
236
+ const midpoint = actualWidth / 2;
230
237
  return sankeyGraph.nodes.map((node, index)=>{
231
238
  const extNode = node;
232
239
  const x0 = extNode.x0 || 0;
233
240
  const x1 = extNode.x1 || 0;
234
241
  const y0 = extNode.y0 || 0;
235
242
  const y1 = extNode.y1 || 0;
236
- const isLeftSide = x0 < actualWidth / 2;
243
+ const nodeCenter = (x0 + x1) / 2;
244
+ const labelOnRight = nodeCenter < midpoint;
245
+ const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core_default().Spacing.SpacingXs);
246
+ const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core_default().Spacing.SpacingXs);
247
+ const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
248
+ const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core_default().Spacing.SpacingXs));
249
+ const displayLabel = truncateText(extNode.label, maxChars);
237
250
  return {
238
251
  node: extNode,
239
252
  x: x0,
@@ -241,10 +254,12 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
241
254
  width: x1 - x0,
242
255
  height: y1 - y0,
243
256
  color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
244
- labelX: isLeftSide ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
257
+ labelX: labelOnRight ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
245
258
  labelY: (y0 + y1) / 2,
246
- labelAnchor: isLeftSide ? 'start' : 'end',
247
- value: extNode.value || 0
259
+ labelAnchor: labelOnRight ? 'start' : 'end',
260
+ value: extNode.value || 0,
261
+ displayLabel,
262
+ fullLabel: extNode.label
248
263
  };
249
264
  });
250
265
  }, [
@@ -364,12 +379,17 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
364
379
  onMouseLeave: handleNodeMouseLeave,
365
380
  onClick: (e)=>onNodeClick?.(nodeItem.node, e)
366
381
  }),
367
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeLabel, {
382
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledSankeyNodeLabel, {
368
383
  x: nodeItem.labelX,
369
384
  y: nodeItem.labelY,
370
385
  dy: "0.35em",
371
386
  textAnchor: nodeItem.labelAnchor,
372
- children: nodeItem.node.label
387
+ children: [
388
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
389
+ children: nodeItem.fullLabel
390
+ }),
391
+ nodeItem.displayLabel
392
+ ]
373
393
  }),
374
394
  nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
375
395
  x: nodeItem.labelX,
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map CHANGED
@@ -1 +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;AA6H5F,eAAO,MAAM,eAAe,6FAwZ3B,CAAC"}
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,6FAob3B,CAAC"}
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js CHANGED
@@ -35,15 +35,17 @@ const StyledSankeyLink = styled('path')({
35
35
  const StyledSankeyNodeLabel = styled('text')({
36
36
  fontSize: apollo_core.FontVariantToken.fontSizeS,
37
37
  fill: 'var(--color-foreground-emp)',
38
- pointerEvents: 'none',
39
- userSelect: 'none'
38
+ pointerEvents: 'auto',
39
+ userSelect: 'none',
40
+ cursor: 'default'
40
41
  });
41
42
  const StyledSankeyNodeValue = styled('text')({
42
43
  fontSize: apollo_core.FontVariantToken.fontSizeS,
43
44
  fontWeight: apollo_core.FontFamily.FontWeightMedium,
44
45
  fill: 'var(--color-foreground-emp)',
45
- pointerEvents: 'none',
46
- userSelect: 'none'
46
+ pointerEvents: 'auto',
47
+ userSelect: 'none',
48
+ cursor: 'default'
47
49
  });
48
50
  const LinkTooltipContent = styled(Paper)({
49
51
  backgroundColor: 'var(--color-background)',
@@ -75,8 +77,12 @@ const TooltipValue = styled('span')({
75
77
  color: 'var(--color-foreground-emp)',
76
78
  fontWeight: apollo_core.FontFamily.FontWeightSemibold
77
79
  });
78
- const DIAGRAM_MARGIN_HORIZONTAL = 1;
80
+ const DIAGRAM_MARGIN_HORIZONTAL = 80;
79
81
  const DIAGRAM_MARGIN_VERTICAL = 5;
82
+ const truncateText = (text, maxChars)=>{
83
+ if (text.length <= maxChars) return text;
84
+ return `${text.substring(0, maxChars - 1)}…`;
85
+ };
80
86
  const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
81
87
  const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
82
88
  const containerRef = useRef(null);
@@ -188,13 +194,20 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
188
194
  ]);
189
195
  const nodeData = useMemo(()=>{
190
196
  if (!sankeyGraph) return [];
197
+ const midpoint = actualWidth / 2;
191
198
  return sankeyGraph.nodes.map((node, index)=>{
192
199
  const extNode = node;
193
200
  const x0 = extNode.x0 || 0;
194
201
  const x1 = extNode.x1 || 0;
195
202
  const y0 = extNode.y0 || 0;
196
203
  const y1 = extNode.y1 || 0;
197
- const isLeftSide = x0 < actualWidth / 2;
204
+ const nodeCenter = (x0 + x1) / 2;
205
+ const labelOnRight = nodeCenter < midpoint;
206
+ const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core.Spacing.SpacingXs);
207
+ const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core.Spacing.SpacingXs);
208
+ const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
209
+ const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core.Spacing.SpacingXs));
210
+ const displayLabel = truncateText(extNode.label, maxChars);
198
211
  return {
199
212
  node: extNode,
200
213
  x: x0,
@@ -202,10 +215,12 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
202
215
  width: x1 - x0,
203
216
  height: y1 - y0,
204
217
  color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
205
- labelX: isLeftSide ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
218
+ labelX: labelOnRight ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
206
219
  labelY: (y0 + y1) / 2,
207
- labelAnchor: isLeftSide ? 'start' : 'end',
208
- value: extNode.value || 0
220
+ labelAnchor: labelOnRight ? 'start' : 'end',
221
+ value: extNode.value || 0,
222
+ displayLabel,
223
+ fullLabel: extNode.label
209
224
  };
210
225
  });
211
226
  }, [
@@ -325,12 +340,17 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
325
340
  onMouseLeave: handleNodeMouseLeave,
326
341
  onClick: (e)=>onNodeClick?.(nodeItem.node, e)
327
342
  }),
328
- /*#__PURE__*/ jsx(StyledSankeyNodeLabel, {
343
+ /*#__PURE__*/ jsxs(StyledSankeyNodeLabel, {
329
344
  x: nodeItem.labelX,
330
345
  y: nodeItem.labelY,
331
346
  dy: "0.35em",
332
347
  textAnchor: nodeItem.labelAnchor,
333
- children: nodeItem.node.label
348
+ children: [
349
+ /*#__PURE__*/ jsx("title", {
350
+ children: nodeItem.fullLabel
351
+ }),
352
+ nodeItem.displayLabel
353
+ ]
334
354
  }),
335
355
  nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
336
356
  x: nodeItem.labelX,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.29.0",
3
+ "version": "3.29.2",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",