@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.
Files changed (31) hide show
  1. package/dist/canvas/components/BaseNode/BaseNode.cjs +27 -9
  2. package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
  3. package/dist/canvas/components/BaseNode/BaseNode.js +28 -10
  4. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.cjs +3 -2
  5. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts +1 -1
  6. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts.map +1 -1
  7. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.js +3 -2
  8. package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs +15 -14
  9. package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts +1 -3
  10. package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts.map +1 -1
  11. package/dist/canvas/components/BaseNode/BaseNodeContainer.js +15 -14
  12. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.cjs +10 -24
  13. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts +2 -7
  14. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts.map +1 -1
  15. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.js +11 -25
  16. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.cjs +0 -5
  17. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts.map +1 -1
  18. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.js +1 -6
  19. package/dist/canvas/components/BaseNode/NodeLabel.cjs +8 -7
  20. package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
  21. package/dist/canvas/components/BaseNode/NodeLabel.js +8 -7
  22. package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs +3 -2
  23. package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts +2 -1
  24. package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts.map +1 -1
  25. package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js +3 -2
  26. package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.cjs +4 -2
  27. package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts +2 -1
  28. package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts.map +1 -1
  29. package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.js +4 -2
  30. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  31. 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;AAkChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAyiB1B,eAAO,MAAM,QAAQ,8CAjgBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAigBhB,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":"AACA,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,GAAI,+BAA+B,kBAAkB,4CA0B9E,CAAC"}
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 external_constants_cjs_namespaceObject = require("../../constants.cjs");
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 animate-glow [--glow-color:var(--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, width, height, hasFooter, background, loading, children })=>{
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: (0, apollo_wind_namespaceObject.cn)('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', 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'),
69
- style: {
70
- width,
71
- height,
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, width, height, hasFooter, background, loading, children, }: BaseContainerProps) => import("react/jsx-runtime").JSX.Element;
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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,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;AACD,eAAO,MAAM,aAAa,GAAI,iKAc3B,kBAAkB,4CA4CpB,CAAC"}
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 { DEFAULT_NODE_SIZE, NODE_CONTAINER_RADIUS_RATIO } from "../../constants.js";
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 animate-glow [--glow-color:var(--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, width, height, hasFooter, background, loading, children })=>{
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: cn('relative flex items-center cursor-pointer bg-surface-overlay border-2 border-border', 'circle' === shape ? 'rounded-full' : '', 'rectangle' === shape ? 'flex-row justify-start gap-3 p-2' : 'flex-col justify-center', hasFooter && 'flex-wrap rounded-2xl', 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'),
40
- style: {
41
- width,
42
- height,
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 external_constants_cjs_namespaceObject = require("../../constants.cjs");
32
- const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containerWidth = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, containerHeight = external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE, children })=>{
33
- const effectiveContainerHeight = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerHeight;
34
- const effectiveContainerWidth = hasFooter ? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE : containerWidth;
35
- const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
36
- const innerSize = basis * external_constants_cjs_namespaceObject.NODE_INNER_SHAPE_RATIO;
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
- '--canvas-icon-size': `${iconSize}px`
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: "rounded-lg",
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
- shape?: NodeShape;
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: ({ shape, color, background, hasFooter, loading, containerWidth, containerHeight, children, }: BaseInnerShapeProps) => import("react/jsx-runtime").JSX.Element;
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":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,eAAO,MAAM,cAAc,GAAI,8FAS5B,mBAAmB,4CAgDrB,CAAC"}
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, cn } from "@uipath/apollo-wind";
3
- import { DEFAULT_NODE_SIZE, NODE_INNER_ICON_RATIO, NODE_INNER_RADIUS_RATIO, NODE_INNER_SHAPE_RATIO } from "../../constants.js";
4
- const BaseInnerShape = ({ shape, color, background, hasFooter, loading, containerWidth = DEFAULT_NODE_SIZE, containerHeight = DEFAULT_NODE_SIZE, children })=>{
5
- const effectiveContainerHeight = hasFooter ? DEFAULT_NODE_SIZE : containerHeight;
6
- const effectiveContainerWidth = hasFooter ? DEFAULT_NODE_SIZE : containerWidth;
7
- const basis = 'rectangle' === shape ? effectiveContainerHeight : Math.min(effectiveContainerWidth, effectiveContainerHeight);
8
- const innerSize = basis * NODE_INNER_SHAPE_RATIO;
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
- '--canvas-icon-size': `${iconSize}px`
20
- },
10
+ background
11
+ } : void 0,
21
12
  children: loading ? /*#__PURE__*/ jsx(Skeleton, {
22
13
  "data-testid": "skeleton-icon",
23
- className: "rounded-lg",
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,4CAmB1B,CAAC"}
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 { DEFAULT_NODE_SIZE, NODE_ERROR_ICON_SIZE } from "../../constants.js";
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, apollo_wind_namespaceObject.cn)('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'),
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, apollo_wind_namespaceObject.cn)('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' : 'break-all line-clamp-3'),
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, apollo_wind_namespaceObject.cn)('text-center text-xs leading-[18px] text-foreground-muted break-all overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
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, apollo_wind_namespaceObject.cn)('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'),
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)("div", {
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-description": "Add node label",
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":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,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"}
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"}