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

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

@@ -0,0 +1,410 @@
+"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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1 @@
+{"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"}