@uipath/apollo-react 4.5.4-pr525.f7c19ae → 4.6.0-pr525.17baf33
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.
- package/dist/canvas/components/BaseNode/BaseNode.cjs +27 -9
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +28 -10
- package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.cjs +3 -2
- package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts +1 -1
- package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.js +3 -2
- package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs +15 -14
- package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts +1 -3
- package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNodeContainer.js +15 -14
- package/dist/canvas/components/BaseNode/BaseNodeInnerShape.cjs +10 -24
- package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts +2 -7
- package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNodeInnerShape.js +11 -25
- package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.cjs +0 -5
- package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.js +1 -6
- package/dist/canvas/components/BaseNode/NodeLabel.cjs +8 -7
- package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/NodeLabel.js +8 -7
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs +3 -2
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts +2 -1
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js +3 -2
- package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.cjs +4 -2
- package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts +2 -1
- package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.js +4 -2
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/package.json +2 -2
|
@@ -229,6 +229,31 @@ const BaseNodeComponent = (props)=>{
|
|
|
229
229
|
display.subLabel
|
|
230
230
|
]);
|
|
231
231
|
const displayFooter = footerComponent;
|
|
232
|
+
const hasFooter = !!displayFooter;
|
|
233
|
+
const containerWidth = getContainerWidth(displayShape, width);
|
|
234
|
+
const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
|
|
235
|
+
const nodeVars = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
236
|
+
const numH = 'number' == typeof containerHeight ? containerHeight : void 0;
|
|
237
|
+
const radiusBasis = 'rectangle' === displayShape ? numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : Math.min(containerWidth, numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
|
|
238
|
+
const nodeRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${radiusBasis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO}px`;
|
|
239
|
+
const effectiveH = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : numH ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
|
|
240
|
+
const effectiveW = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
|
|
241
|
+
const basis = 'rectangle' === displayShape ? effectiveH : Math.min(effectiveW, effectiveH);
|
|
242
|
+
const innerRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO}px`;
|
|
243
|
+
return {
|
|
244
|
+
'--node-w': `${containerWidth}px`,
|
|
245
|
+
'--node-h': numH ? `${numH}px` : 'auto',
|
|
246
|
+
'--node-radius': nodeRadius,
|
|
247
|
+
'--inner-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO}px`,
|
|
248
|
+
'--inner-radius': innerRadius,
|
|
249
|
+
'--icon-size': `${basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO}px`
|
|
250
|
+
};
|
|
251
|
+
}, [
|
|
252
|
+
containerWidth,
|
|
253
|
+
containerHeight,
|
|
254
|
+
displayShape,
|
|
255
|
+
hasFooter
|
|
256
|
+
]);
|
|
232
257
|
const interactionState = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
233
258
|
if (disabled) return 'disabled';
|
|
234
259
|
if (dragging) return 'drag';
|
|
@@ -345,6 +370,7 @@ const BaseNodeComponent = (props)=>{
|
|
|
345
370
|
if (!manifest) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
346
371
|
ref: containerRef,
|
|
347
372
|
className: "relative",
|
|
373
|
+
style: nodeVars,
|
|
348
374
|
onMouseEnter: handleMouseEnter,
|
|
349
375
|
onMouseLeave: handleMouseLeave,
|
|
350
376
|
onFocus: handleFocus,
|
|
@@ -356,12 +382,10 @@ const BaseNodeComponent = (props)=>{
|
|
|
356
382
|
interactionState: interactionState
|
|
357
383
|
})
|
|
358
384
|
});
|
|
359
|
-
const hasFooter = !!displayFooter;
|
|
360
|
-
const containerWidth = getContainerWidth(displayShape, width);
|
|
361
|
-
const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
|
|
362
385
|
const nodeContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
363
386
|
ref: containerRef,
|
|
364
387
|
className: "relative",
|
|
388
|
+
style: nodeVars,
|
|
365
389
|
onMouseEnter: handleMouseEnter,
|
|
366
390
|
onMouseLeave: handleMouseLeave,
|
|
367
391
|
onFocus: handleFocus,
|
|
@@ -375,20 +399,14 @@ const BaseNodeComponent = (props)=>{
|
|
|
375
399
|
executionStatus: executionStatus,
|
|
376
400
|
validationStatus: validationState?.validationStatus,
|
|
377
401
|
suggestionType: suggestionType,
|
|
378
|
-
width: containerWidth,
|
|
379
|
-
height: containerHeight,
|
|
380
402
|
hasFooter: hasFooter,
|
|
381
403
|
background: displayBackground,
|
|
382
404
|
loading: data.loading,
|
|
383
405
|
children: [
|
|
384
406
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
|
|
385
|
-
shape: displayShape,
|
|
386
407
|
color: displayColor,
|
|
387
408
|
background: displayIconBackground,
|
|
388
409
|
loading: data.loading,
|
|
389
|
-
hasFooter: hasFooter,
|
|
390
|
-
containerWidth: containerWidth,
|
|
391
|
-
containerHeight: 'number' == typeof containerHeight ? containerHeight : void 0,
|
|
392
410
|
children: data.loading ? null : Icon
|
|
393
411
|
}),
|
|
394
412
|
adornments?.topLeft && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeBadgeSlot_cjs_namespaceObject.BaseBadgeSlot, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAsChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAolB1B,eAAO,MAAM,QAAQ,8CA5iBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CA4iBhB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Position, useReactFlow, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
|
|
3
3
|
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
4
|
-
import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE } from "../../constants.js";
|
|
4
|
+
import { DEFAULT_NODE_SIZE, DEFAULT_RECTANGLE_NODE_WIDTH, GRID_SPACING, NODE_CONTAINER_RADIUS_RATIO, NODE_HEIGHT_DEFAULT, NODE_HEIGHT_FOOTER_BUTTON, NODE_HEIGHT_FOOTER_DOUBLE, NODE_HEIGHT_FOOTER_SINGLE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
|
|
5
5
|
import { useNodeTypeRegistry } from "../../core/index.js";
|
|
6
6
|
import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
|
|
7
7
|
import { resolveAdornments } from "../../utils/adornment-resolver.js";
|
|
@@ -201,6 +201,31 @@ const BaseNodeComponent = (props)=>{
|
|
|
201
201
|
display.subLabel
|
|
202
202
|
]);
|
|
203
203
|
const displayFooter = footerComponent;
|
|
204
|
+
const hasFooter = !!displayFooter;
|
|
205
|
+
const containerWidth = getContainerWidth(displayShape, width);
|
|
206
|
+
const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
|
|
207
|
+
const nodeVars = useMemo(()=>{
|
|
208
|
+
const numH = 'number' == typeof containerHeight ? containerHeight : void 0;
|
|
209
|
+
const radiusBasis = 'rectangle' === displayShape ? numH ?? DEFAULT_NODE_SIZE : Math.min(containerWidth, numH ?? DEFAULT_NODE_SIZE);
|
|
210
|
+
const nodeRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${radiusBasis * NODE_CONTAINER_RADIUS_RATIO}px`;
|
|
211
|
+
const effectiveH = hasFooter ? DEFAULT_NODE_SIZE : numH ?? DEFAULT_NODE_SIZE;
|
|
212
|
+
const effectiveW = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
|
|
213
|
+
const basis = 'rectangle' === displayShape ? effectiveH : Math.min(effectiveW, effectiveH);
|
|
214
|
+
const innerRadius = 'circle' === displayShape ? '50%' : hasFooter ? '16px' : `${basis * NODE_INNER_RADIUS_RATIO}px`;
|
|
215
|
+
return {
|
|
216
|
+
'--node-w': `${containerWidth}px`,
|
|
217
|
+
'--node-h': numH ? `${numH}px` : 'auto',
|
|
218
|
+
'--node-radius': nodeRadius,
|
|
219
|
+
'--inner-size': `${basis * NODE_INNER_SHAPE_RATIO}px`,
|
|
220
|
+
'--inner-radius': innerRadius,
|
|
221
|
+
'--icon-size': `${basis * NODE_INNER_ICON_RATIO}px`
|
|
222
|
+
};
|
|
223
|
+
}, [
|
|
224
|
+
containerWidth,
|
|
225
|
+
containerHeight,
|
|
226
|
+
displayShape,
|
|
227
|
+
hasFooter
|
|
228
|
+
]);
|
|
204
229
|
const interactionState = useMemo(()=>{
|
|
205
230
|
if (disabled) return 'disabled';
|
|
206
231
|
if (dragging) return 'drag';
|
|
@@ -317,6 +342,7 @@ const BaseNodeComponent = (props)=>{
|
|
|
317
342
|
if (!manifest) return /*#__PURE__*/ jsx("div", {
|
|
318
343
|
ref: containerRef,
|
|
319
344
|
className: "relative",
|
|
345
|
+
style: nodeVars,
|
|
320
346
|
onMouseEnter: handleMouseEnter,
|
|
321
347
|
onMouseLeave: handleMouseLeave,
|
|
322
348
|
onFocus: handleFocus,
|
|
@@ -328,12 +354,10 @@ const BaseNodeComponent = (props)=>{
|
|
|
328
354
|
interactionState: interactionState
|
|
329
355
|
})
|
|
330
356
|
});
|
|
331
|
-
const hasFooter = !!displayFooter;
|
|
332
|
-
const containerWidth = getContainerWidth(displayShape, width);
|
|
333
|
-
const containerHeight = getContainerHeight(height, hasFooter, displayFooterVariant);
|
|
334
357
|
const nodeContent = /*#__PURE__*/ jsxs("div", {
|
|
335
358
|
ref: containerRef,
|
|
336
359
|
className: "relative",
|
|
360
|
+
style: nodeVars,
|
|
337
361
|
onMouseEnter: handleMouseEnter,
|
|
338
362
|
onMouseLeave: handleMouseLeave,
|
|
339
363
|
onFocus: handleFocus,
|
|
@@ -347,20 +371,14 @@ const BaseNodeComponent = (props)=>{
|
|
|
347
371
|
executionStatus: executionStatus,
|
|
348
372
|
validationStatus: validationState?.validationStatus,
|
|
349
373
|
suggestionType: suggestionType,
|
|
350
|
-
width: containerWidth,
|
|
351
|
-
height: containerHeight,
|
|
352
374
|
hasFooter: hasFooter,
|
|
353
375
|
background: displayBackground,
|
|
354
376
|
loading: data.loading,
|
|
355
377
|
children: [
|
|
356
378
|
/*#__PURE__*/ jsx(BaseInnerShape, {
|
|
357
|
-
shape: displayShape,
|
|
358
379
|
color: displayColor,
|
|
359
380
|
background: displayIconBackground,
|
|
360
381
|
loading: data.loading,
|
|
361
|
-
hasFooter: hasFooter,
|
|
362
|
-
containerWidth: containerWidth,
|
|
363
|
-
containerHeight: 'number' == typeof containerHeight ? containerHeight : void 0,
|
|
364
382
|
children: data.loading ? null : Icon
|
|
365
383
|
}),
|
|
366
384
|
adornments?.topLeft && /*#__PURE__*/ jsx(BaseBadgeSlot, {
|
|
@@ -27,8 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
27
27
|
BaseBadgeSlot: ()=>BaseBadgeSlot
|
|
28
28
|
});
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
+
const external_react_namespaceObject = require("react");
|
|
30
31
|
const external_constants_cjs_namespaceObject = require("../../constants.cjs");
|
|
31
|
-
const BaseBadgeSlot = ({ position, shape, children })=>{
|
|
32
|
+
const BaseBadgeSlot = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ position, shape, children })=>{
|
|
32
33
|
const offset = 'circle' === shape ? external_constants_cjs_namespaceObject.NODE_BADGE_INSET_CIRCLE : external_constants_cjs_namespaceObject.NODE_BADGE_INSET_SQUARE;
|
|
33
34
|
const style = {
|
|
34
35
|
width: external_constants_cjs_namespaceObject.NODE_BADGE_SIZE,
|
|
@@ -57,7 +58,7 @@ const BaseBadgeSlot = ({ position, shape, children })=>{
|
|
|
57
58
|
style: style,
|
|
58
59
|
children: children
|
|
59
60
|
});
|
|
60
|
-
};
|
|
61
|
+
});
|
|
61
62
|
exports.BaseBadgeSlot = __webpack_exports__.BaseBadgeSlot;
|
|
62
63
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
63
64
|
"BaseBadgeSlot"
|
|
@@ -4,6 +4,6 @@ interface BaseBadgeSlotProps {
|
|
|
4
4
|
shape?: NodeShape;
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
export declare const BaseBadgeSlot: ({ position, shape, children }: BaseBadgeSlotProps) => import("react/jsx-runtime").JSX.Element
|
|
7
|
+
export declare const BaseBadgeSlot: import("react").MemoExoticComponent<({ position, shape, children }: BaseBadgeSlotProps) => import("react/jsx-runtime").JSX.Element>;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=BaseNodeBadgeSlot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNodeBadgeSlot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeBadgeSlot.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BaseNodeBadgeSlot.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeBadgeSlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,sEAAwC,kBAAkB,6CA0BlF,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from "react";
|
|
2
3
|
import { NODE_BADGE_INSET_CIRCLE, NODE_BADGE_INSET_SQUARE, NODE_BADGE_SIZE } from "../../constants.js";
|
|
3
|
-
const BaseBadgeSlot = ({ position, shape, children })=>{
|
|
4
|
+
const BaseBadgeSlot = /*#__PURE__*/ memo(({ position, shape, children })=>{
|
|
4
5
|
const offset = 'circle' === shape ? NODE_BADGE_INSET_CIRCLE : NODE_BADGE_INSET_SQUARE;
|
|
5
6
|
const style = {
|
|
6
7
|
width: NODE_BADGE_SIZE,
|
|
@@ -29,5 +30,5 @@ const BaseBadgeSlot = ({ position, shape, children })=>{
|
|
|
29
30
|
style: style,
|
|
30
31
|
children: children
|
|
31
32
|
});
|
|
32
|
-
};
|
|
33
|
+
});
|
|
33
34
|
export { BaseBadgeSlot };
|
|
@@ -29,14 +29,14 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
31
|
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
32
|
-
const
|
|
32
|
+
const external_react_namespaceObject = require("react");
|
|
33
33
|
const getStatusBorder = (status)=>{
|
|
34
34
|
switch(status){
|
|
35
35
|
case 'InProgress':
|
|
36
36
|
return 'border-info animate-glow [--glow-color:var(--info)]';
|
|
37
37
|
case 'Completed':
|
|
38
38
|
case 'add':
|
|
39
|
-
return 'border-success
|
|
39
|
+
return 'border-success';
|
|
40
40
|
case 'Paused':
|
|
41
41
|
case 'Warning':
|
|
42
42
|
case 'WARNING':
|
|
@@ -53,25 +53,26 @@ const getStatusBorder = (status)=>{
|
|
|
53
53
|
return '';
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
|
-
const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType,
|
|
57
|
-
const numericWidth = 'number' == typeof width ? width : void 0;
|
|
58
|
-
const numericHeight = 'number' == typeof height ? height : void 0;
|
|
59
|
-
const radiusBasis = 'rectangle' === shape ? numericHeight ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : Math.min(numericWidth ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, numericHeight ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE);
|
|
60
|
-
const containerRadius = radiusBasis * external_constants_cjs_namespaceObject.NODE_CONTAINER_RADIUS_RATIO;
|
|
56
|
+
const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children })=>{
|
|
61
57
|
const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
|
|
58
|
+
const className = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) [border-radius:var(--node-radius)]', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
|
|
59
|
+
shape,
|
|
60
|
+
hasFooter,
|
|
61
|
+
activeStatus,
|
|
62
|
+
isSelected,
|
|
63
|
+
isHovered,
|
|
64
|
+
interactionState
|
|
65
|
+
]);
|
|
62
66
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
63
67
|
"data-testid": "base-container",
|
|
64
68
|
"data-execution-status": executionStatus,
|
|
65
69
|
"data-interaction-state": interactionState,
|
|
66
70
|
"data-validation-status": validationStatus,
|
|
67
71
|
"data-suggestion-type": suggestionType,
|
|
68
|
-
className:
|
|
69
|
-
style: {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
background,
|
|
73
|
-
borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
|
|
74
|
-
},
|
|
72
|
+
className: className,
|
|
73
|
+
style: background ? {
|
|
74
|
+
background
|
|
75
|
+
} : void 0,
|
|
75
76
|
"aria-busy": loading || void 0,
|
|
76
77
|
children: children
|
|
77
78
|
});
|
|
@@ -11,13 +11,11 @@ interface BaseContainerProps {
|
|
|
11
11
|
executionStatus?: ElementStatusValues;
|
|
12
12
|
validationStatus?: ValidationErrorSeverity;
|
|
13
13
|
suggestionType?: SuggestionType;
|
|
14
|
-
width?: number;
|
|
15
|
-
height?: number | 'auto';
|
|
16
14
|
hasFooter?: boolean;
|
|
17
15
|
background?: string;
|
|
18
16
|
loading?: boolean;
|
|
19
17
|
children: React.ReactNode;
|
|
20
18
|
}
|
|
21
|
-
export declare const BaseContainer: ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType,
|
|
19
|
+
export declare const BaseContainer: ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children, }: BaseContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
20
|
export {};
|
|
23
21
|
//# sourceMappingURL=BaseNodeContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,
|
|
1
|
+
{"version":3,"file":"BaseNodeContainer.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,eAAO,MAAM,eAAe,GAC1B,SAAS,mBAAmB,GAAG,uBAAuB,GAAG,cAAc,KACtE,MAsBF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,kJAY3B,kBAAkB,4CAoCpB,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "@uipath/apollo-wind";
|
|
3
|
-
import {
|
|
3
|
+
import { useMemo } from "react";
|
|
4
4
|
const getStatusBorder = (status)=>{
|
|
5
5
|
switch(status){
|
|
6
6
|
case 'InProgress':
|
|
7
7
|
return 'border-info animate-glow [--glow-color:var(--info)]';
|
|
8
8
|
case 'Completed':
|
|
9
9
|
case 'add':
|
|
10
|
-
return 'border-success
|
|
10
|
+
return 'border-success';
|
|
11
11
|
case 'Paused':
|
|
12
12
|
case 'Warning':
|
|
13
13
|
case 'WARNING':
|
|
@@ -24,25 +24,26 @@ const getStatusBorder = (status)=>{
|
|
|
24
24
|
return '';
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
-
const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType,
|
|
28
|
-
const numericWidth = 'number' == typeof width ? width : void 0;
|
|
29
|
-
const numericHeight = 'number' == typeof height ? height : void 0;
|
|
30
|
-
const radiusBasis = 'rectangle' === shape ? numericHeight ?? DEFAULT_NODE_SIZE : Math.min(numericWidth ?? DEFAULT_NODE_SIZE, numericHeight ?? DEFAULT_NODE_SIZE);
|
|
31
|
-
const containerRadius = radiusBasis * NODE_CONTAINER_RADIUS_RATIO;
|
|
27
|
+
const BaseContainer = ({ isSelected, isHovered, shape, interactionState, executionStatus, validationStatus, suggestionType, hasFooter, background, loading, children })=>{
|
|
32
28
|
const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
|
|
29
|
+
const className = useMemo(()=>cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'w-(--node-w) h-(--node-h) [border-radius:var(--node-radius)]', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap', getStatusBorder(activeStatus), !isSelected && isHovered && 'border-foreground-muted', isSelected && 'border-brand', isSelected && isHovered && 'border-foreground-accent-muted', 'disabled' === interactionState && 'opacity-50 cursor-not-allowed', 'drag' === interactionState && 'cursor-grabbing opacity-80'), [
|
|
30
|
+
shape,
|
|
31
|
+
hasFooter,
|
|
32
|
+
activeStatus,
|
|
33
|
+
isSelected,
|
|
34
|
+
isHovered,
|
|
35
|
+
interactionState
|
|
36
|
+
]);
|
|
33
37
|
return /*#__PURE__*/ jsx("div", {
|
|
34
38
|
"data-testid": "base-container",
|
|
35
39
|
"data-execution-status": executionStatus,
|
|
36
40
|
"data-interaction-state": interactionState,
|
|
37
41
|
"data-validation-status": validationStatus,
|
|
38
42
|
"data-suggestion-type": suggestionType,
|
|
39
|
-
className:
|
|
40
|
-
style: {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
background,
|
|
44
|
-
borderRadius: 'circle' === shape || hasFooter ? void 0 : containerRadius
|
|
45
|
-
},
|
|
43
|
+
className: className,
|
|
44
|
+
style: background ? {
|
|
45
|
+
background
|
|
46
|
+
} : void 0,
|
|
46
47
|
"aria-busy": loading || void 0,
|
|
47
48
|
children: children
|
|
48
49
|
});
|
|
@@ -28,34 +28,20 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
});
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
30
|
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const iconSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_ICON_RATIO;
|
|
38
|
-
const innerRadius = basis * external_constants_cjs_namespaceObject.NODE_INNER_RADIUS_RATIO;
|
|
39
|
-
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
40
|
-
className: (0, apollo_wind_namespaceObject.cn)('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'),
|
|
41
|
-
style: {
|
|
42
|
-
width: innerSize,
|
|
43
|
-
height: innerSize,
|
|
44
|
-
borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
32
|
+
const INNER_SHAPE_CLASS = "flex items-center justify-center overflow-hidden bg-surface text-foreground w-(--inner-size) h-(--inner-size) [border-radius:var(--inner-radius)] [&>svg]:w-(--icon-size) [&>svg]:h-(--icon-size) [&>img]:w-(--icon-size) [&>img]:h-(--icon-size) [&>img]:object-contain";
|
|
33
|
+
const SKELETON_CLASS = 'rounded-lg w-(--icon-size) h-(--icon-size)';
|
|
34
|
+
const BaseInnerShape = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ loading, color, background, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
35
|
+
className: INNER_SHAPE_CLASS,
|
|
36
|
+
style: color || background ? {
|
|
45
37
|
color,
|
|
46
|
-
background
|
|
47
|
-
|
|
48
|
-
},
|
|
38
|
+
background
|
|
39
|
+
} : void 0,
|
|
49
40
|
children: loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Skeleton, {
|
|
50
41
|
"data-testid": "skeleton-icon",
|
|
51
|
-
className:
|
|
52
|
-
style: {
|
|
53
|
-
width: iconSize,
|
|
54
|
-
height: iconSize
|
|
55
|
-
}
|
|
42
|
+
className: SKELETON_CLASS
|
|
56
43
|
}) : children
|
|
57
|
-
});
|
|
58
|
-
};
|
|
44
|
+
}));
|
|
59
45
|
exports.BaseInnerShape = __webpack_exports__.BaseInnerShape;
|
|
60
46
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
61
47
|
"BaseInnerShape"
|
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import type { NodeShape } from '../../schema';
|
|
2
1
|
interface BaseInnerShapeProps {
|
|
3
|
-
|
|
2
|
+
loading?: boolean;
|
|
4
3
|
color?: string;
|
|
5
4
|
background?: string;
|
|
6
|
-
hasFooter?: boolean;
|
|
7
|
-
loading?: boolean;
|
|
8
|
-
containerWidth?: number;
|
|
9
|
-
containerHeight?: number;
|
|
10
5
|
children: React.ReactNode;
|
|
11
6
|
}
|
|
12
|
-
export declare const BaseInnerShape: ({
|
|
7
|
+
export declare const BaseInnerShape: import("react").MemoExoticComponent<({ loading, color, background, children }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element>;
|
|
13
8
|
export {};
|
|
14
9
|
//# sourceMappingURL=BaseNodeInnerShape.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BaseNodeInnerShape.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeInnerShape.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,iFACkB,mBAAmB,6CAQ/D,CAAC"}
|
|
@@ -1,31 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Skeleton
|
|
3
|
-
import {
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const iconSize = basis * NODE_INNER_ICON_RATIO;
|
|
10
|
-
const innerRadius = basis * NODE_INNER_RADIUS_RATIO;
|
|
11
|
-
return /*#__PURE__*/ jsx("div", {
|
|
12
|
-
className: cn('flex items-center justify-center overflow-hidden bg-surface text-foreground', 'circle' === shape ? 'rounded-full' : '', hasFooter ? 'rounded-2xl' : '', '[&>svg]:w-(--canvas-icon-size) [&>svg]:h-(--canvas-icon-size)', '[&>img]:w-(--canvas-icon-size) [&>img]:h-(--canvas-icon-size) [&>img]:object-contain'),
|
|
13
|
-
style: {
|
|
14
|
-
width: innerSize,
|
|
15
|
-
height: innerSize,
|
|
16
|
-
borderRadius: 'circle' === shape || hasFooter ? void 0 : innerRadius,
|
|
2
|
+
import { Skeleton } from "@uipath/apollo-wind";
|
|
3
|
+
import { memo } from "react";
|
|
4
|
+
const INNER_SHAPE_CLASS = "flex items-center justify-center overflow-hidden bg-surface text-foreground w-(--inner-size) h-(--inner-size) [border-radius:var(--inner-radius)] [&>svg]:w-(--icon-size) [&>svg]:h-(--icon-size) [&>img]:w-(--icon-size) [&>img]:h-(--icon-size) [&>img]:object-contain";
|
|
5
|
+
const SKELETON_CLASS = 'rounded-lg w-(--icon-size) h-(--icon-size)';
|
|
6
|
+
const BaseInnerShape = /*#__PURE__*/ memo(({ loading, color, background, children })=>/*#__PURE__*/ jsx("div", {
|
|
7
|
+
className: INNER_SHAPE_CLASS,
|
|
8
|
+
style: color || background ? {
|
|
17
9
|
color,
|
|
18
|
-
background
|
|
19
|
-
|
|
20
|
-
},
|
|
10
|
+
background
|
|
11
|
+
} : void 0,
|
|
21
12
|
children: loading ? /*#__PURE__*/ jsx(Skeleton, {
|
|
22
13
|
"data-testid": "skeleton-icon",
|
|
23
|
-
className:
|
|
24
|
-
style: {
|
|
25
|
-
width: iconSize,
|
|
26
|
-
height: iconSize
|
|
27
|
-
}
|
|
14
|
+
className: SKELETON_CLASS
|
|
28
15
|
}) : children
|
|
29
|
-
});
|
|
30
|
-
};
|
|
16
|
+
}));
|
|
31
17
|
export { BaseInnerShape };
|
|
@@ -37,13 +37,8 @@ const MissingManifestNode = ({ type, isSelected, isHovered, interactionState })=
|
|
|
37
37
|
isSelected: isSelected,
|
|
38
38
|
isHovered: isHovered,
|
|
39
39
|
interactionState: interactionState,
|
|
40
|
-
width: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
|
|
41
|
-
height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
|
|
42
40
|
children: [
|
|
43
41
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNodeInnerShape_cjs_namespaceObject.BaseInnerShape, {
|
|
44
|
-
shape: "square",
|
|
45
|
-
containerWidth: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
|
|
46
|
-
containerHeight: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
|
|
47
42
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.CanvasIcon, {
|
|
48
43
|
icon: "circle-alert",
|
|
49
44
|
size: external_constants_cjs_namespaceObject.NODE_ERROR_ICON_SIZE,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNodeMissingManifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeMissingManifest.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oDAKjC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"BaseNodeMissingManifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeMissingManifest.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oDAKjC,wBAAwB,4CAY1B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { NODE_ERROR_ICON_SIZE } from "../../constants.js";
|
|
3
3
|
import { CanvasIcon } from "../../utils/index.js";
|
|
4
4
|
import { BaseContainer } from "./BaseNodeContainer.js";
|
|
5
5
|
import { BaseInnerShape } from "./BaseNodeInnerShape.js";
|
|
@@ -9,13 +9,8 @@ const MissingManifestNode = ({ type, isSelected, isHovered, interactionState })=
|
|
|
9
9
|
isSelected: isSelected,
|
|
10
10
|
isHovered: isHovered,
|
|
11
11
|
interactionState: interactionState,
|
|
12
|
-
width: DEFAULT_NODE_SIZE,
|
|
13
|
-
height: DEFAULT_NODE_SIZE,
|
|
14
12
|
children: [
|
|
15
13
|
/*#__PURE__*/ jsx(BaseInnerShape, {
|
|
16
|
-
shape: "square",
|
|
17
|
-
containerWidth: DEFAULT_NODE_SIZE,
|
|
18
|
-
containerHeight: DEFAULT_NODE_SIZE,
|
|
19
14
|
children: /*#__PURE__*/ jsx(CanvasIcon, {
|
|
20
15
|
icon: "circle-alert",
|
|
21
16
|
size: NODE_ERROR_ICON_SIZE,
|
|
@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
NodeLabel: ()=>NodeLabel
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
-
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
32
31
|
const external_react_namespaceObject = require("react");
|
|
33
32
|
const external_constants_cjs_namespaceObject = require("../../constants.cjs");
|
|
33
|
+
const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
|
|
34
34
|
const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
|
|
35
35
|
const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
|
|
36
36
|
if ('rectangle' === shape) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
@@ -38,7 +38,7 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
|
|
|
38
38
|
children: children
|
|
39
39
|
});
|
|
40
40
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
41
|
-
className: (0,
|
|
41
|
+
className: (0, CssUtil_cjs_namespaceObject.cx)('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
|
|
42
42
|
style: {
|
|
43
43
|
bottom: hasBottomHandles ? external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET
|
|
44
44
|
},
|
|
@@ -58,7 +58,7 @@ const ConditionalTooltip = ({ content, children })=>{
|
|
|
58
58
|
const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
59
59
|
"data-testid": dataTestId,
|
|
60
60
|
onDoubleClick: onDoubleClick,
|
|
61
|
-
className: (0,
|
|
61
|
+
className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
|
|
62
62
|
style: backgroundColor ? {
|
|
63
63
|
backgroundColor
|
|
64
64
|
} : void 0,
|
|
@@ -67,7 +67,7 @@ const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid'
|
|
|
67
67
|
const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
68
68
|
"data-testid": dataTestId,
|
|
69
69
|
onDoubleClick: onDoubleClick,
|
|
70
|
-
className: (0,
|
|
70
|
+
className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
|
|
71
71
|
children: children
|
|
72
72
|
});
|
|
73
73
|
const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
|
|
@@ -79,16 +79,17 @@ const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
|
|
|
79
79
|
onChange: onChange,
|
|
80
80
|
onKeyDown: onKeyDown,
|
|
81
81
|
onBlur: onBlur,
|
|
82
|
-
className: (0,
|
|
82
|
+
className: (0, CssUtil_cjs_namespaceObject.cx)('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
|
|
83
83
|
style: backgroundColor ? {
|
|
84
84
|
backgroundColor
|
|
85
85
|
} : void 0
|
|
86
86
|
}));
|
|
87
87
|
EditableLabel.displayName = 'EditableLabel';
|
|
88
|
-
const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("
|
|
88
|
+
const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
89
|
+
type: "button",
|
|
89
90
|
onDoubleClick: onDoubleClick,
|
|
90
91
|
className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
|
|
91
|
-
"aria-
|
|
92
|
+
"aria-label": "Add node label",
|
|
92
93
|
"data-testid": "empty-label-placeholder"
|
|
93
94
|
});
|
|
94
95
|
const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AA+IF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA+KD,eAAO,MAAM,SAAS,mLAjKnB,cAAc,6CAiK+B,CAAC"}
|