@uipath/apollo-react 3.28.0 → 3.29.1

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -52,7 +52,7 @@ const external_StickyNoteNode_types_cjs_namespaceObject = require("./StickyNoteN
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
-    const { updateNodeData } = (0, react_cjs_namespaceObject.useReactFlow)();
+    const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(data.autoFocus ?? false);
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = (0, external_react_namespaceObject.useState)(false);
@@ -146,6 +146,18 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }
         }, 0);
     }, []);
+    const handleDelete = (0, external_react_namespaceObject.useCallback)(()=>{
+        deleteElements({
+            nodes: [
+                {
+                    id
+                }
+            ]
+        });
+    }, [
+        id,
+        deleteElements
+    ]);
     const markdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
             a: ({ href, children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
                     ...props,
@@ -163,6 +175,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         }), []);
     const toolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>{
         const actions = [
+            {
+                id: 'delete',
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
+                    variant: "outlined",
+                    name: "delete"
+                }),
+                label: 'Delete',
+                onAction: handleDelete
+            },
             {
                 id: 'edit',
                 icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAuB1E,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG9E,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAoTD,eAAO,MAAM,cAAc,kHAxSxB,mBAAmB,6CAwSqC,CAAC"}
+{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAuB1E,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAG9E,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AA8TD,eAAO,MAAM,cAAc,kHAlTxB,mBAAmB,6CAkTqC,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -13,7 +13,7 @@ import { STICKY_NOTE_COLORS, withAlpha } from "./StickyNoteNode.types.js";
 const minWidth = 8 * GRID_SPACING;
 const minHeight = 8 * GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false })=>{
-    const { updateNodeData } = useReactFlow();
+    const { updateNodeData, deleteElements } = useReactFlow();
     const [isEditing, setIsEditing] = useState(data.autoFocus ?? false);
     const [isResizing, setIsResizing] = useState(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
@@ -107,6 +107,18 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }
         }, 0);
     }, []);
+    const handleDelete = useCallback(()=>{
+        deleteElements({
+            nodes: [
+                {
+                    id
+                }
+            ]
+        });
+    }, [
+        id,
+        deleteElements
+    ]);
     const markdownComponents = useMemo(()=>({
             a: ({ href, children, ...props })=>/*#__PURE__*/ jsx("a", {
                     ...props,
@@ -124,6 +136,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         }), []);
     const toolbarConfig = useMemo(()=>{
         const actions = [
+            {
+                id: 'delete',
+                icon: /*#__PURE__*/ jsx(ApIcon, {
+                    variant: "outlined",
+                    name: "delete"
+                }),
+                label: 'Delete',
+                onAction: handleDelete
+            },
             {
                 id: 'edit',
                 icon: /*#__PURE__*/ jsx(ApIcon, {

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

@@ -74,15 +74,17 @@ const StyledSankeyLink = (0, styles_namespaceObject.styled)('path')({
 const StyledSankeyNodeLabel = (0, styles_namespaceObject.styled)('text')({
     fontSize: apollo_core_default().FontVariantToken.fontSizeS,
     fill: 'var(--color-foreground-emp)',
-    pointerEvents: 'none',
-    userSelect: 'none'
+    pointerEvents: 'auto',
+    userSelect: 'none',
+    cursor: 'default'
 });
 const StyledSankeyNodeValue = (0, styles_namespaceObject.styled)('text')({
     fontSize: apollo_core_default().FontVariantToken.fontSizeS,
     fontWeight: apollo_core_default().FontFamily.FontWeightMedium,
     fill: 'var(--color-foreground-emp)',
-    pointerEvents: 'none',
-    userSelect: 'none'
+    pointerEvents: 'auto',
+    userSelect: 'none',
+    cursor: 'default'
 });
 const LinkTooltipContent = (0, styles_namespaceObject.styled)(material_namespaceObject.Paper)({
     backgroundColor: 'var(--color-background)',
@@ -114,8 +116,12 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
 });
-const DIAGRAM_MARGIN_HORIZONTAL = 1;
+const DIAGRAM_MARGIN_HORIZONTAL = 80;
 const DIAGRAM_MARGIN_VERTICAL = 5;
+const truncateText = (text, maxChars)=>{
+    if (text.length <= maxChars) return text;
+    return `${text.substring(0, maxChars - 1)}…`;
+};
 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;
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
@@ -227,13 +233,20 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
     ]);
     const nodeData = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!sankeyGraph) return [];
+        const midpoint = actualWidth / 2;
         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 isLeftSide = x0 < actualWidth / 2;
+            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);
             return {
                 node: extNode,
                 x: x0,
@@ -241,10 +254,12 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                 width: x1 - x0,
                 height: y1 - y0,
                 color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
-                labelX: isLeftSide ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
+                labelX: labelOnRight ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
                 labelY: (y0 + y1) / 2,
-                labelAnchor: isLeftSide ? 'start' : 'end',
-                value: extNode.value || 0
+                labelAnchor: labelOnRight ? 'start' : 'end',
+                value: extNode.value || 0,
+                displayLabel,
+                fullLabel: extNode.label
             };
         });
     }, [
@@ -364,12 +379,17 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                                         onMouseLeave: handleNodeMouseLeave,
                                         onClick: (e)=>onNodeClick?.(nodeItem.node, e)
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeLabel, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledSankeyNodeLabel, {
                                         x: nodeItem.labelX,
                                         y: nodeItem.labelY,
                                         dy: "0.35em",
                                         textAnchor: nodeItem.labelAnchor,
-                                        children: nodeItem.node.label
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
+                                                children: nodeItem.fullLabel
+                                            }),
+                                            nodeItem.displayLabel
+                                        ]
                                     }),
                                     nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
                                         x: nodeItem.labelX,

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;AA6H5F,eAAO,MAAM,eAAe,6FAwZ3B,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;AAqI5F,eAAO,MAAM,eAAe,6FAob3B,CAAC"}

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

@@ -35,15 +35,17 @@ const StyledSankeyLink = styled('path')({
 const StyledSankeyNodeLabel = styled('text')({
     fontSize: apollo_core.FontVariantToken.fontSizeS,
     fill: 'var(--color-foreground-emp)',
-    pointerEvents: 'none',
-    userSelect: 'none'
+    pointerEvents: 'auto',
+    userSelect: 'none',
+    cursor: 'default'
 });
 const StyledSankeyNodeValue = styled('text')({
     fontSize: apollo_core.FontVariantToken.fontSizeS,
     fontWeight: apollo_core.FontFamily.FontWeightMedium,
     fill: 'var(--color-foreground-emp)',
-    pointerEvents: 'none',
-    userSelect: 'none'
+    pointerEvents: 'auto',
+    userSelect: 'none',
+    cursor: 'default'
 });
 const LinkTooltipContent = styled(Paper)({
     backgroundColor: 'var(--color-background)',
@@ -75,8 +77,12 @@ const TooltipValue = styled('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core.FontFamily.FontWeightSemibold
 });
-const DIAGRAM_MARGIN_HORIZONTAL = 1;
+const DIAGRAM_MARGIN_HORIZONTAL = 80;
 const DIAGRAM_MARGIN_VERTICAL = 5;
+const truncateText = (text, maxChars)=>{
+    if (text.length <= maxChars) return text;
+    return `${text.substring(0, maxChars - 1)}…`;
+};
 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;
     const containerRef = useRef(null);
@@ -188,13 +194,20 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     ]);
     const nodeData = useMemo(()=>{
         if (!sankeyGraph) return [];
+        const midpoint = actualWidth / 2;
         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 isLeftSide = x0 < actualWidth / 2;
+            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);
             return {
                 node: extNode,
                 x: x0,
@@ -202,10 +215,12 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                 width: x1 - x0,
                 height: y1 - y0,
                 color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
-                labelX: isLeftSide ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
+                labelX: labelOnRight ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
                 labelY: (y0 + y1) / 2,
-                labelAnchor: isLeftSide ? 'start' : 'end',
-                value: extNode.value || 0
+                labelAnchor: labelOnRight ? 'start' : 'end',
+                value: extNode.value || 0,
+                displayLabel,
+                fullLabel: extNode.label
             };
         });
     }, [
@@ -325,12 +340,17 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                                         onMouseLeave: handleNodeMouseLeave,
                                         onClick: (e)=>onNodeClick?.(nodeItem.node, e)
                                     }),
-                                    /*#__PURE__*/ jsx(StyledSankeyNodeLabel, {
+                                    /*#__PURE__*/ jsxs(StyledSankeyNodeLabel, {
                                         x: nodeItem.labelX,
                                         y: nodeItem.labelY,
                                         dy: "0.35em",
                                         textAnchor: nodeItem.labelAnchor,
-                                        children: nodeItem.node.label
+                                        children: [
+                                            /*#__PURE__*/ jsx("title", {
+                                                children: nodeItem.fullLabel
+                                            }),
+                                            nodeItem.displayLabel
+                                        ]
                                     }),
                                     nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
                                         x: nodeItem.labelX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.28.0",
+  "version": "3.29.1",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -199,7 +199,7 @@
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
     "@uipath/apollo-core": "5.7.0",
-    "@uipath/apollo-wind": "0.8.0"
+    "@uipath/apollo-wind": "0.8.1"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",