@uipath/apollo-react 4.5.4-pr525.f7c19ae → 4.6.0

package/dist/canvas/components/BaseNode/BaseNode.styles.js

@@ -0,0 +1,342 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Skeleton } from "@uipath/apollo-wind";
+import { getExecutionStatusBorder, pulseAnimation } from "../../styles/execution-status.js";
+const GRID_UNIT = 16;
+const NODE_HEIGHT_DEFAULT = 6 * GRID_UNIT;
+const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_UNIT;
+const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_UNIT;
+const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_UNIT;
+const getIconDimensions = (shape, nodeHeight, nodeWidth)=>{
+    const height = nodeHeight ?? 96;
+    const width = nodeWidth ?? 96;
+    const widthDimension = height !== width && 'rectangle' === shape ? height : width;
+    const widthScaleFactor = widthDimension / 96;
+    const iconWidth = 72 * widthScaleFactor;
+    const heightScaleFactor = height / 96;
+    const isExpandable = height !== width && 'rectangle' !== shape;
+    const iconHeight = isExpandable ? 84 * heightScaleFactor : 72 * heightScaleFactor;
+    return {
+        iconWidth,
+        iconHeight
+    };
+};
+const getValidationStatusBorder = (validationStatus)=>{
+    switch(validationStatus){
+        case 'ERROR':
+        case 'CRITICAL':
+            return css`
+        border-color: var(--canvas-error-icon);
+        background: var(--canvas-error-background);
+        animation: ${pulseAnimation('--canvas-error-icon')} 2s infinite;
+      `;
+        default:
+            return null;
+    }
+};
+const getInteractionStateBorder = (interactionState)=>{
+    switch(interactionState){
+        case 'hover':
+            return css`
+        outline: 4px solid var(--canvas-secondary-focused);
+      `;
+        case 'disabled':
+            return css`
+        opacity: 0.5;
+        cursor: not-allowed;
+      `;
+        case 'drag':
+            return css`
+        cursor: grabbing;
+        opacity: 0.8;
+      `;
+        default:
+            return null;
+    }
+};
+const getSuggestionTypeBorder = (suggestionType)=>{
+    const borderColorVar = getSuggestionTypeBorderColorVar(suggestionType);
+    const backgroundColorVar = getSuggestionTypeBackgroundColorVar(suggestionType);
+    if (!borderColorVar || !backgroundColorVar) return null;
+    return css`
+    border-color: var(${borderColorVar});
+    background: var(${backgroundColorVar});
+    animation: ${pulseAnimation(borderColorVar)} 2s infinite;
+  `;
+};
+const getSuggestionTypeBorderColorVar = (suggestionType)=>{
+    switch(suggestionType){
+        case 'add':
+            return '--canvas-success-icon';
+        case 'update':
+            return '--canvas-warning-icon';
+        case 'delete':
+            return '--canvas-error-icon';
+        default:
+            return null;
+    }
+};
+const getSuggestionTypeBackgroundColorVar = (suggestionType)=>{
+    switch(suggestionType){
+        case 'add':
+            return '--canvas-success-background';
+        case 'update':
+            return '--canvas-warning-background';
+        case 'delete':
+            return '--canvas-error-background';
+        default:
+            return null;
+    }
+};
+const BaseContainer = styled.div`
+  position: relative;
+  width: ${({ shape, width })=>{
+    const defaultWidth = 'rectangle' === shape ? 288 : 96;
+    if (width && 96 !== width && 288 !== width) return `${width}px`;
+    return `${defaultWidth}px`;
+}};
+  height: ${({ height, hasFooter, footerVariant })=>{
+    if (hasFooter) switch(footerVariant){
+        case 'button':
+            return `${NODE_HEIGHT_FOOTER_BUTTON}px`;
+        case 'single':
+            return `${NODE_HEIGHT_FOOTER_SINGLE}px`;
+        case 'double':
+            return `${NODE_HEIGHT_FOOTER_DOUBLE}px`;
+        default:
+            return 'auto';
+    }
+    return height ? `${height}px` : `${NODE_HEIGHT_DEFAULT}px`;
+}};
+  background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background)'};
+  border: 1.5px solid var(--canvas-border-de-emp);
+  border-radius: ${({ shape })=>{
+    if ('circle' === shape) return '50%';
+    return '16px';
+}};
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: ${({ shape })=>'rectangle' === shape ? 'row' : 'column'};
+  flex-wrap: ${({ hasFooter })=>hasFooter ? 'wrap' : 'nowrap'};
+  align-items: center;
+  justify-content: ${({ shape })=>'rectangle' === shape ? 'flex-start' : 'center'};
+  gap: ${({ shape })=>'rectangle' === shape ? '12px' : '0'};
+  padding: ${({ shape, height, hasFooter })=>{
+    if ('rectangle' === shape) {
+        if (hasFooter) return '16px';
+        const scaleFactor = height ? height / 100 : 1;
+        return `${14 * scaleFactor}px`;
+    }
+    return '0';
+}};
+  cursor: pointer;
+
+  ${({ executionStatus })=>getExecutionStatusBorder(executionStatus)}
+  ${({ validationStatus })=>getValidationStatusBorder(validationStatus)}
+  ${({ interactionState })=>getInteractionStateBorder(interactionState)}
+  ${({ suggestionType })=>getSuggestionTypeBorder(suggestionType)}
+
+  ${({ selected, suggestionType })=>{
+    if (selected && suggestionType) {
+        const borderColorVar = getSuggestionTypeBorderColorVar(suggestionType);
+        return css`
+        border-color: var(${borderColorVar});
+        outline: 4px solid color-mix(in srgb, var(${borderColorVar}) 40%, transparent);
+      `;
+    }
+    if (selected) return css`
+        border-color: var(--canvas-primary);
+        outline: 4px solid var(--canvas-secondary-pressed);
+      `;
+    return '';
+}}
+`;
+const BaseIconWrapper = styled.div`
+  ${({ height, width, shape })=>{
+    const { iconWidth, iconHeight } = getIconDimensions(shape, height, width);
+    return css`
+      width: ${iconWidth}px;
+      height: ${iconHeight}px;
+    `;
+}}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ color })=>color || 'var(--canvas-foreground)'};
+  background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-secondary)'};
+  border-radius: ${({ shape })=>{
+    if ('circle' === shape) return '50%';
+    return '8px';
+}};
+
+  svg {
+    width: ${({ width })=>{
+    const scaleFactor = width ? width / 96 : 1;
+    return `${40 * scaleFactor}px`;
+}};
+    height: ${({ height })=>{
+    const scaleFactor = height ? height / 96 : 1;
+    return `${40 * scaleFactor}px`;
+}};
+  }
+
+  img {
+    width: ${({ width })=>{
+    const scaleFactor = width ? width / 96 : 1;
+    return `${40 * scaleFactor}px`;
+}};
+    height: ${({ height })=>{
+    const scaleFactor = height ? height / 96 : 1;
+    return `${40 * scaleFactor}px`;
+}};
+    object-fit: contain;
+  }
+`;
+const BaseTextContainer = styled.div`
+  ${({ shape, hasBottomHandles })=>'rectangle' === shape ? css`
+          flex: 1;
+          min-width: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          text-align: left;
+        ` : css`
+          position: absolute;
+          bottom: ${hasBottomHandles ? '-40px' : '-8px'};
+          width: 150%;
+          left: 50%;
+          transform: translateX(-50%) translateY(100%);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          z-index: 10;
+          transition: transform 0.2s ease-in-out;
+
+          /* When there's a bottom handle, offset text to the right to avoid overlapping */
+          ${hasBottomHandles && css`
+            transform: translateX(20%) translateY(50%);
+            text-align: left;
+          `}
+        `}
+`;
+const BaseHeader = styled.div`
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--canvas-foreground);
+  ${({ backgroundColor })=>backgroundColor && css`
+      background-color: ${backgroundColor};
+      padding: 2px 6px;
+      border-radius: 4px;
+    `}
+  line-height: 1.4;
+  margin-bottom: 2px;
+  overflow: hidden;
+  ${({ shape })=>'rectangle' === shape ? css`
+          width: 100%;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        ` : css`
+          word-break: break-word;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+        `}
+`;
+const BaseSubHeader = styled.div`
+  font-size: 11px;
+  color: var(--canvas-foreground-de-emp);
+  line-height: 1.3;
+  word-break: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  ${({ shape })=>'rectangle' === shape ? css`
+          width: 100%;
+          -webkit-line-clamp: 2;
+        ` : css`
+          -webkit-line-clamp: 5;
+`}
+`;
+const EditableLabel = styled.textarea`
+  resize: none;
+  field-sizing: ${({ shape })=>'rectangle' === shape ? 'fixed' : 'content'};
+  font-weight: ${({ variant })=>'subtext' === variant ? '400' : '600'};
+  font-size: ${({ variant })=>'subtext' === variant ? '11px' : '13px'};
+  line-height: ${({ variant })=>'subtext' === variant ? '1.3' : '1.4'};
+  font-family: inherit;
+  color: var(--canvas-foreground);
+  border: none;
+  border-radius: 4px;
+  outline: 1px dashed var(--canvas-border-de-emp);
+  margin-bottom: ${({ variant })=>'subtext' === variant ? 0 : '2px'};
+  max-width: 100%;
+
+  ${({ backgroundColor })=>backgroundColor ? css`
+          background-color: ${backgroundColor};
+          padding: 2px 6px;
+        ` : 'background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);'}
+
+  ${({ shape })=>'rectangle' === shape ? css`
+          width: 100%;
+        ` : css`
+          text-align: center;
+        `}
+`;
+const EmptyLabelPlaceholder = styled.div`
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--canvas-foreground-de-emp);
+  background: transparent;
+  border: 1px dashed var(--canvas-border-de-emp);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  min-width: 20px;
+  min-height: 20px;
+
+  &:hover {
+    opacity: 1;
+    background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);
+  }
+`;
+const BaseBadgeSlot = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background: transparent;
+  position: absolute;
+  ${({ position, shape })=>{
+    const offset = 'circle' === shape ? '12px' : '6px';
+    switch(position){
+        case 'top-left':
+            return `top: ${offset}; left: ${offset};`;
+        case 'top-right':
+            return `top: ${offset}; right: ${offset};`;
+        case 'bottom-left':
+            return `bottom: ${offset}; left: ${offset};`;
+        case 'bottom-right':
+            return `bottom: ${offset}; right: ${offset};`;
+    }
+}}
+`;
+const BaseSkeletonIcon = styled(Skeleton, {
+    shouldForwardProp: (prop)=>'shape' !== prop && 'nodeHeight' !== prop && 'nodeWidth' !== prop
+})`
+  flex-grow: 0;
+  flex-shrink: 0;
+  ${({ shape, nodeHeight, nodeWidth })=>{
+    const { iconWidth, iconHeight } = getIconDimensions(shape, nodeHeight, nodeWidth);
+    const isCircle = 'circle' === shape;
+    return css`
+      width: ${iconWidth}px;
+      height: ${iconHeight}px;
+      border-radius: ${isCircle ? '50%' : '8px'};
+    `;
+}}
+`;
+export { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSkeletonIcon, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder };

package/dist/canvas/components/BaseNode/NodeLabel.cjs

@@ -24,27 +24,12 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    BaseTextContainer: ()=>BaseTextContainer,
     NodeLabel: ()=>NodeLabel
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
-const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
-    if ('rectangle' === shape) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "flex flex-1 min-w-0 flex-col items-start text-left",
-        children: children
-    });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        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'),
-        style: {
-            bottom: hasBottomHandles ? external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : external_constants_cjs_namespaceObject.NODE_TEXT_BOTTOM_OFFSET
-        },
-        children: children
-    });
-};
+const external_BaseNode_styles_cjs_namespaceObject = require("./BaseNode.styles.cjs");
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
@@ -55,42 +40,6 @@ const ConditionalTooltip = ({ content, children })=>{
         children: children
     });
 };
-const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        "data-testid": dataTestId,
-        onDoubleClick: onDoubleClick,
-        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'),
-        style: backgroundColor ? {
-            backgroundColor
-        } : void 0,
-        children: children
-    });
-const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        "data-testid": dataTestId,
-        onDoubleClick: onDoubleClick,
-        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'),
-        children: children
-    });
-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", {
-        ref: ref,
-        value: value,
-        placeholder: placeholder,
-        rows: rows,
-        "aria-label": ariaLabel,
-        onChange: onChange,
-        onKeyDown: onKeyDown,
-        onBlur: onBlur,
-        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'),
-        style: backgroundColor ? {
-            backgroundColor
-        } : void 0
-    }));
-EditableLabel.displayName = 'EditableLabel';
-const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        onDoubleClick: onDoubleClick,
-        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",
-        "aria-description": "Add node label",
-        "data-testid": "empty-label-placeholder"
-    });
 const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
     const [localLabel, setLocalLabel] = (0, external_react_namespaceObject.useState)('');
@@ -101,7 +50,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     const handleSave = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
         setFocusTarget(null);
-        if (localLabel !== label || localSubLabel !== subLabel) onChange?.({
+        if (localLabel !== label || localSubLabel !== subLabel) onChange({
             label: localLabel,
             subLabel: localSubLabel
         });
@@ -175,23 +124,27 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     }, [
         handleSave
     ]);
-    if (!label && !subLabel && !isEditing) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
+    if (!label && !subLabel && !isEditing) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyLabelPlaceholder, {
-                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.EmptyLabelPlaceholder, {
+                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
+                className: "nodrag nowheel",
+                role: "button",
+                "aria-label": "Add node label",
+                "data-testid": "empty-label-placeholder"
             }),
             centerAdornment
         ]
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseNode_styles_cjs_namespaceObject.BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
         children: [
             isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditableLabel, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.EditableLabel, {
                         ref: labelInputRef,
                         value: localLabel,
                         onChange: (e)=>setLocalLabel(e.target.value),
@@ -200,11 +153,13 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         shape: shape,
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
+                        className: "nodrag nowheel",
                         placeholder: "Name",
                         rows: 'rectangle' === shape ? 1 : void 0,
+                        role: "textbox",
                         "aria-label": "Edit node name"
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditableLabel, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.EditableLabel, {
                         ref: subLabelInputRef,
                         value: localSubLabel,
                         onChange: (e)=>setLocalSubLabel(e.target.value),
@@ -212,22 +167,24 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         onBlur: handleBlur,
                         shape: shape,
                         variant: "subtext",
+                        className: "nodrag nowheel",
                         placeholder: "Description",
                         rows: 'rectangle' === shape ? 2 : void 0,
+                        role: "textbox",
                         "aria-label": "Edit node description"
                     })
                 ]
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ConditionalTooltip, {
                 content: labelTooltip,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseHeader, {
                         shape: shape,
                         backgroundColor: labelBackgroundColor,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
                         "data-testid": "node-label",
                         children: label
                     }),
-                    subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
+                    subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseNode_styles_cjs_namespaceObject.BaseSubHeader, {
                         shape: shape,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
                         "data-testid": "node-sublabel",
@@ -240,10 +197,8 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     });
 };
 const NodeLabel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(NodeLabelInternal);
-exports.BaseTextContainer = __webpack_exports__.BaseTextContainer;
 exports.NodeLabel = __webpack_exports__.NodeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "BaseTextContainer",
     "NodeLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/components/BaseNode/NodeLabel.d.ts

@@ -1,10 +1,4 @@
 import type { NodeShape } from '../../schema';
-interface BaseTextContainerProps {
-    hasBottomHandles?: boolean;
-    shape?: NodeShape;
-    children: React.ReactNode;
-}
-export declare const BaseTextContainer: ({ hasBottomHandles, shape, children, }: BaseTextContainerProps) => import("react/jsx-runtime").JSX.Element;
 export interface NodeLabelProps {
     label?: string;
     subLabel?: string;
@@ -16,11 +10,10 @@ export interface NodeLabelProps {
     dragging?: boolean;
     centerAdornment?: React.ReactNode;
     readonly?: boolean;
-    onChange?: (values: {
+    onChange: (values: {
         label: string;
         subLabel: string;
     }) => void;
 }
 export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
-export {};
 //# sourceMappingURL=NodeLabel.d.ts.map

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map

@@ -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"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,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,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACjE;AAwMD,eAAO,MAAM,SAAS,mLAzKnB,cAAc,6CAyK+B,CAAC"}

package/dist/canvas/components/BaseNode/NodeLabel.js

@@ -1,21 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@uipath/apollo-wind";
-import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
-import { NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES } from "../../constants.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { CanvasTooltip } from "../CanvasTooltip.js";
-const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
-    if ('rectangle' === shape) return /*#__PURE__*/ jsx("div", {
-        className: "flex flex-1 min-w-0 flex-col items-start text-left",
-        children: children
-    });
-    return /*#__PURE__*/ jsx("div", {
-        className: 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'),
-        style: {
-            bottom: hasBottomHandles ? NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : NODE_TEXT_BOTTOM_OFFSET
-        },
-        children: children
-    });
-};
+import { BaseHeader, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder } from "./BaseNode.styles.js";
 const ConditionalTooltip = ({ content, children })=>{
     if (!content) return children;
     return /*#__PURE__*/ jsx(CanvasTooltip, {
@@ -26,42 +12,6 @@ const ConditionalTooltip = ({ content, children })=>{
         children: children
     });
 };
-const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
-        "data-testid": dataTestId,
-        onDoubleClick: onDoubleClick,
-        className: 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'),
-        style: backgroundColor ? {
-            backgroundColor
-        } : void 0,
-        children: children
-    });
-const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
-        "data-testid": dataTestId,
-        onDoubleClick: onDoubleClick,
-        className: 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'),
-        children: children
-    });
-const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
-        ref: ref,
-        value: value,
-        placeholder: placeholder,
-        rows: rows,
-        "aria-label": ariaLabel,
-        onChange: onChange,
-        onKeyDown: onKeyDown,
-        onBlur: onBlur,
-        className: 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'),
-        style: backgroundColor ? {
-            backgroundColor
-        } : void 0
-    }));
-EditableLabel.displayName = 'EditableLabel';
-const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ jsx("div", {
-        onDoubleClick: onDoubleClick,
-        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",
-        "aria-description": "Add node label",
-        "data-testid": "empty-label-placeholder"
-    });
 const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
     const [isEditing, setIsEditing] = useState(false);
     const [localLabel, setLocalLabel] = useState('');
@@ -72,7 +22,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     const handleSave = useCallback(()=>{
         setIsEditing(false);
         setFocusTarget(null);
-        if (localLabel !== label || localSubLabel !== subLabel) onChange?.({
+        if (localLabel !== label || localSubLabel !== subLabel) onChange({
             label: localLabel,
             subLabel: localSubLabel
         });
@@ -151,7 +101,11 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ jsx(EmptyLabelPlaceholder, {
-                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
+                onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
+                className: "nodrag nowheel",
+                role: "button",
+                "aria-label": "Add node label",
+                "data-testid": "empty-label-placeholder"
             }),
             centerAdornment
         ]
@@ -171,8 +125,10 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         shape: shape,
                         variant: "normal",
                         backgroundColor: labelBackgroundColor,
+                        className: "nodrag nowheel",
                         placeholder: "Name",
                         rows: 'rectangle' === shape ? 1 : void 0,
+                        role: "textbox",
                         "aria-label": "Edit node name"
                     }),
                     /*#__PURE__*/ jsx(EditableLabel, {
@@ -183,22 +139,24 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         onBlur: handleBlur,
                         shape: shape,
                         variant: "subtext",
+                        className: "nodrag nowheel",
                         placeholder: "Description",
                         rows: 'rectangle' === shape ? 2 : void 0,
+                        role: "textbox",
                         "aria-label": "Edit node description"
                     })
                 ]
             }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
                 content: labelTooltip,
                 children: [
-                    /*#__PURE__*/ jsx(Header, {
+                    /*#__PURE__*/ jsx(BaseHeader, {
                         shape: shape,
                         backgroundColor: labelBackgroundColor,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
                         "data-testid": "node-label",
                         children: label
                     }),
-                    subLabel && /*#__PURE__*/ jsx(SubHeader, {
+                    subLabel && /*#__PURE__*/ jsx(BaseSubHeader, {
                         shape: shape,
                         onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
                         "data-testid": "node-sublabel",
@@ -211,4 +169,4 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
     });
 };
 const NodeLabel = /*#__PURE__*/ memo(NodeLabelInternal);
-export { BaseTextContainer, NodeLabel };
+export { NodeLabel };