@uipath/apollo-react 4.6.2 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.6.2",
+  "version": "4.7.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -184,7 +184,7 @@
     "lodash": "^4.18.1",
     "lucide-react": "^0.555.0",
     "luxon": "^3.7.1",
-    "mermaid": "^11.13.0",
+    "mermaid": "^11.14.0",
     "motion": "^12.23.12",
     "react-dropzone": "^14.3.8",
     "react-focus-lock": "^2.13.7",
@@ -202,10 +202,9 @@
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
     "@uipath/apollo-core": "5.9.0",
-    "@uipath/apollo-wind": "2.3.0"
+    "@uipath/apollo-wind": "2.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "^4.1.17",
     "@lingui/cli": "^5.6.1",
     "@lingui/conf": "^5.6.1",
     "@lingui/format-json": "^5.6.1",
@@ -218,6 +217,7 @@
     "@storybook/react": "^10.2.15",
     "@storybook/react-vite": "^10.2.15",
     "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/cli": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

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

@@ -1,410 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    BaseIconWrapper: ()=>BaseIconWrapper,
-    BaseContainer: ()=>BaseContainer,
-    BaseTextContainer: ()=>BaseTextContainer,
-    BaseBadgeSlot: ()=>BaseBadgeSlot,
-    EditableLabel: ()=>EditableLabel,
-    BaseSubHeader: ()=>BaseSubHeader,
-    EmptyLabelPlaceholder: ()=>EmptyLabelPlaceholder,
-    BaseHeader: ()=>BaseHeader,
-    BaseSkeletonIcon: ()=>BaseSkeletonIcon
-});
-const react_namespaceObject = require("@emotion/react");
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
-const execution_status_cjs_namespaceObject = require("../../styles/execution-status.cjs");
-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 (0, react_namespaceObject.css)`
-        border-color: var(--canvas-error-icon);
-        background: var(--canvas-error-background);
-        animation: ${(0, execution_status_cjs_namespaceObject.pulseAnimation)('--canvas-error-icon')} 2s infinite;
-      `;
-        default:
-            return null;
-    }
-};
-const getInteractionStateBorder = (interactionState)=>{
-    switch(interactionState){
-        case 'hover':
-            return (0, react_namespaceObject.css)`
-        outline: 4px solid var(--canvas-secondary-focused);
-      `;
-        case 'disabled':
-            return (0, react_namespaceObject.css)`
-        opacity: 0.5;
-        cursor: not-allowed;
-      `;
-        case 'drag':
-            return (0, react_namespaceObject.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 (0, react_namespaceObject.css)`
-    border-color: var(${borderColorVar});
-    background: var(${backgroundColorVar});
-    animation: ${(0, execution_status_cjs_namespaceObject.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_default().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 })=>(0, execution_status_cjs_namespaceObject.getExecutionStatusBorder)(executionStatus)}
-  ${({ validationStatus })=>getValidationStatusBorder(validationStatus)}
-  ${({ interactionState })=>getInteractionStateBorder(interactionState)}
-  ${({ suggestionType })=>getSuggestionTypeBorder(suggestionType)}
-
-  ${({ selected, suggestionType })=>{
-    if (selected && suggestionType) {
-        const borderColorVar = getSuggestionTypeBorderColorVar(suggestionType);
-        return (0, react_namespaceObject.css)`
-        border-color: var(${borderColorVar});
-        outline: 4px solid color-mix(in srgb, var(${borderColorVar}) 40%, transparent);
-      `;
-    }
-    if (selected) return (0, react_namespaceObject.css)`
-        border-color: var(--canvas-primary);
-        outline: 4px solid var(--canvas-secondary-pressed);
-      `;
-    return '';
-}}
-`;
-const BaseIconWrapper = styled_default().div`
-  ${({ height, width, shape })=>{
-    const { iconWidth, iconHeight } = getIconDimensions(shape, height, width);
-    return (0, react_namespaceObject.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_default().div`
-  ${({ shape, hasBottomHandles })=>'rectangle' === shape ? (0, react_namespaceObject.css)`
-          flex: 1;
-          min-width: 0;
-          display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-          text-align: left;
-        ` : (0, react_namespaceObject.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 && (0, react_namespaceObject.css)`
-            transform: translateX(20%) translateY(50%);
-            text-align: left;
-          `}
-        `}
-`;
-const BaseHeader = styled_default().div`
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--canvas-foreground);
-  ${({ backgroundColor })=>backgroundColor && (0, react_namespaceObject.css)`
-      background-color: ${backgroundColor};
-      padding: 2px 6px;
-      border-radius: 4px;
-    `}
-  line-height: 1.4;
-  margin-bottom: 2px;
-  overflow: hidden;
-  ${({ shape })=>'rectangle' === shape ? (0, react_namespaceObject.css)`
-          width: 100%;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        ` : (0, react_namespaceObject.css)`
-          word-break: break-word;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 3;
-        `}
-`;
-const BaseSubHeader = styled_default().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 ? (0, react_namespaceObject.css)`
-          width: 100%;
-          -webkit-line-clamp: 2;
-        ` : (0, react_namespaceObject.css)`
-          -webkit-line-clamp: 5;
-`}
-`;
-const EditableLabel = styled_default().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 ? (0, react_namespaceObject.css)`
-          background-color: ${backgroundColor};
-          padding: 2px 6px;
-        ` : 'background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);'}
-
-  ${({ shape })=>'rectangle' === shape ? (0, react_namespaceObject.css)`
-          width: 100%;
-        ` : (0, react_namespaceObject.css)`
-          text-align: center;
-        `}
-`;
-const EmptyLabelPlaceholder = styled_default().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_default().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_default()(apollo_wind_namespaceObject.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 (0, react_namespaceObject.css)`
-      width: ${iconWidth}px;
-      height: ${iconHeight}px;
-      border-radius: ${isCircle ? '50%' : '8px'};
-    `;
-}}
-`;
-exports.BaseBadgeSlot = __webpack_exports__.BaseBadgeSlot;
-exports.BaseContainer = __webpack_exports__.BaseContainer;
-exports.BaseHeader = __webpack_exports__.BaseHeader;
-exports.BaseIconWrapper = __webpack_exports__.BaseIconWrapper;
-exports.BaseSkeletonIcon = __webpack_exports__.BaseSkeletonIcon;
-exports.BaseSubHeader = __webpack_exports__.BaseSubHeader;
-exports.BaseTextContainer = __webpack_exports__.BaseTextContainer;
-exports.EditableLabel = __webpack_exports__.EditableLabel;
-exports.EmptyLabelPlaceholder = __webpack_exports__.EmptyLabelPlaceholder;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "BaseBadgeSlot",
-    "BaseContainer",
-    "BaseHeader",
-    "BaseIconWrapper",
-    "BaseSkeletonIcon",
-    "BaseSubHeader",
-    "BaseTextContainer",
-    "EditableLabel",
-    "EmptyLabelPlaceholder"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

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

@@ -1,75 +0,0 @@
-import type { NodeShape } from '../../schema';
-import type { FooterVariant } from './BaseNode.types';
-export declare const BaseContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    selected?: boolean;
-    backgroundColor?: string;
-    shape?: NodeShape;
-    executionStatus?: string;
-    validationStatus?: string;
-    interactionState?: string;
-    suggestionType?: string;
-    width?: number;
-    height?: number;
-    hasFooter?: boolean;
-    footerVariant?: FooterVariant;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseIconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    color?: string;
-    backgroundColor?: string;
-    shape?: NodeShape;
-    height?: number;
-    width?: number;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseTextContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    hasBottomHandles?: boolean;
-    shape?: NodeShape;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    shape?: NodeShape;
-    backgroundColor?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseSubHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    shape?: NodeShape;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const EditableLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    shape?: NodeShape;
-    backgroundColor?: string;
-    variant: "normal" | "subtext";
-}, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
-export declare const EmptyLabelPlaceholder: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseBadgeSlot: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    shape?: NodeShape;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BaseSkeletonIcon: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-} & {
-    shape?: NodeShape;
-    nodeHeight?: number;
-    nodeWidth?: number;
-}, {}, {}>;
-//# sourceMappingURL=BaseNode.styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BaseNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA4GtD,eAAO,MAAM,aAAa;;;;eACb,OAAO;sBACA,MAAM;YAChB,SAAS;sBACC,MAAM;uBACL,MAAM;uBACN,MAAM;qBACR,MAAM;YACf,MAAM;aACL,MAAM;gBACH,OAAO;oBACH,aAAa;yGAuE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;YAClB,MAAM;sBACI,MAAM;YAChB,SAAS;aACR,MAAM;YACP,MAAM;yGAyCf,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;uBAAmC,OAAO;YAAU,SAAS;yGAiC1F,CAAC;AAEF,eAAO,MAAM,UAAU;;;;YAAwB,SAAS;sBAAoB,MAAM;yGA2BjF,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAAwB,SAAS;yGAiB1D,CAAC;AAEF,eAAO,MAAM,aAAa;;;;YAChB,SAAS;sBACC,MAAM;aACf,QAAQ,GAAG,SAAS;2HA+B9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAkBjC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cACd,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc;YAC3D,SAAS;yGAsBlB,CAAC;AAKF,eAAO,MAAM,gBAAgB;;;YAGnB,SAAS;iBACJ,MAAM;gBACP,MAAM;UAcnB,CAAC"}