@uipath/apollo-react 4.44.0 → 4.45.0

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.cjs

@@ -32,7 +32,7 @@ const external_react_namespaceObject = require("react");
 const VIEWPORT_PADDING = 8;
 function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = (0, external_react_namespaceObject.useRef)(null);
-    const internalNode = (0, react_cjs_namespaceObject.useInternalNode)(nodeId || '');
+    const internalNode = (0, react_cjs_namespaceObject.useInternalNode)(open && nodeId ? nodeId : '');
     const [availableHeight, setAvailableHeight] = (0, external_react_namespaceObject.useState)(null);
     const computedAnchor = (0, external_react_namespaceObject.useMemo)(()=>{
         if (anchorRect) return anchorRect;

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAKf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAwC,MAAM,OAAO,CAAC;AAEnG,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AASjF,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,EACxB,iBAA0B,GAC3B,EAAE,0BAA0B,GAAG,yBAAyB,CAmExD"}
+{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAKf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAwC,MAAM,OAAO,CAAC;AAEnG,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AASjF,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,EACxB,iBAA0B,GAC3B,EAAE,0BAA0B,GAAG,yBAAyB,CAsExD"}

package/dist/canvas/components/FloatingCanvasPanel/useFloatingPosition.js

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 const VIEWPORT_PADDING = 8;
 function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = useRef(null);
-    const internalNode = useInternalNode(nodeId || '');
+    const internalNode = useInternalNode(open && nodeId ? nodeId : '');
     const [availableHeight, setAvailableHeight] = useState(null);
     const computedAnchor = useMemo(()=>{
         if (anchorRect) return anchorRect;

package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.cjs

@@ -27,15 +27,13 @@ __webpack_require__.d(__webpack_exports__, {
     NodePropertiesPanel: ()=>NodePropertiesPanel_NodePropertiesPanel
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
-const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
+const index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_fields_index_cjs_namespaceObject = require("./fields/index.cjs");
 const external_hooks_index_cjs_namespaceObject = require("./hooks/index.cjs");
-const external_NodePropertiesPanel_styles_cjs_namespaceObject = require("./NodePropertiesPanel.styles.cjs");
 const PINNED_PANEL_WIDTH = 320;
 function renderField(field, value, onChange, error) {
     switch(field.type){
@@ -117,14 +115,16 @@ const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ (0, external_react
     const internalNode = selectedNode ? getInternalNode(selectedNode.id) : null;
     const renderSection = (section)=>{
         if (!selectedNode) return null;
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodePropertiesPanel_styles_cjs_namespaceObject.ConfigSection, {
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            className: "px-4 py-4 border-b border-(--canvas-border-de-emp) last:border-b-0",
             children: [
-                section.title && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.SectionTitle, {
+                section.title && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "font-medium text-[14px] text-(--canvas-foreground) mb-2",
                     children: section.title
                 }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
-                    gap: 16,
-                    children: section.fields.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldContainer, {
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "flex flex-col gap-4",
+                    children: section.fields.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             children: renderField(field, selectedNode.data[field.key], (value)=>handleFieldChange(field.key, value), errors[field.key])
                         }, field.key))
                 })
@@ -143,7 +143,7 @@ const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ (0, external_react
             size: 16
         })
     });
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.FloatingCanvasPanel, {
         open: !!selectedNode,
         nodeId: isPinned ? void 0 : selectedNode.id,
         anchorRect: isPinned ? {
@@ -159,10 +159,11 @@ const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ (0, external_react
         onClose: handleClose,
         scrollKey: selectedNode.id,
         isPinned: isPinned,
-        children: schema.sections ? schema.sections.map((section)=>renderSection(section)) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.ConfigSection, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
-                gap: 16,
-                children: schema.fields?.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldContainer, {
+        children: schema.sections ? schema.sections.map((section)=>renderSection(section)) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: "px-4 py-4",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "flex flex-col gap-4",
+                children: schema.fields?.map((field)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         children: selectedNode && renderField(field, selectedNode.data[field.key], (value)=>handleFieldChange(field.key, value), errors[field.key])
                     }, field.key))
             })

package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodePropertiesPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAGV,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AAoCrC,eAAO,MAAM,mBAAmB,gEA8H9B,CAAC"}
+{"version":3,"file":"NodePropertiesPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertiesPanel/NodePropertiesPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAGV,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AAoCrC,eAAO,MAAM,mBAAmB,gEAqI9B,CAAC"}

package/dist/canvas/components/NodePropertiesPanel/NodePropertiesPanel.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Column } from "../../layouts/index.js";
 import { useReactFlow } from "../../xyflow/react.js";
 import { Button } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useState } from "react";
@@ -7,7 +6,6 @@ import { CanvasIcon } from "../../utils/icon-registry.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { CheckboxField, NumberField, SelectField, TextField } from "./fields/index.js";
 import { useNodeConfiguration, useNodeSelection } from "./hooks/index.js";
-import { ConfigSection, FieldContainer, SectionTitle } from "./NodePropertiesPanel.styles.js";
 const PINNED_PANEL_WIDTH = 320;
 function renderField(field, value, onChange, error) {
     switch(field.type){
@@ -89,14 +87,16 @@ const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ memo(function({ no
     const internalNode = selectedNode ? getInternalNode(selectedNode.id) : null;
     const renderSection = (section)=>{
         if (!selectedNode) return null;
-        return /*#__PURE__*/ jsxs(ConfigSection, {
+        return /*#__PURE__*/ jsxs("div", {
+            className: "px-4 py-4 border-b border-(--canvas-border-de-emp) last:border-b-0",
             children: [
-                section.title && /*#__PURE__*/ jsx(SectionTitle, {
+                section.title && /*#__PURE__*/ jsx("div", {
+                    className: "font-medium text-[14px] text-(--canvas-foreground) mb-2",
                     children: section.title
                 }),
-                /*#__PURE__*/ jsx(Column, {
-                    gap: 16,
-                    children: section.fields.map((field)=>/*#__PURE__*/ jsx(FieldContainer, {
+                /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-col gap-4",
+                    children: section.fields.map((field)=>/*#__PURE__*/ jsx("div", {
                             children: renderField(field, selectedNode.data[field.key], (value)=>handleFieldChange(field.key, value), errors[field.key])
                         }, field.key))
                 })
@@ -131,10 +131,11 @@ const NodePropertiesPanel_NodePropertiesPanel = /*#__PURE__*/ memo(function({ no
         onClose: handleClose,
         scrollKey: selectedNode.id,
         isPinned: isPinned,
-        children: schema.sections ? schema.sections.map((section)=>renderSection(section)) : /*#__PURE__*/ jsx(ConfigSection, {
-            children: /*#__PURE__*/ jsx(Column, {
-                gap: 16,
-                children: schema.fields?.map((field)=>/*#__PURE__*/ jsx(FieldContainer, {
+        children: schema.sections ? schema.sections.map((section)=>renderSection(section)) : /*#__PURE__*/ jsx("div", {
+            className: "px-4 py-4",
+            children: /*#__PURE__*/ jsx("div", {
+                className: "flex flex-col gap-4",
+                children: schema.fields?.map((field)=>/*#__PURE__*/ jsx("div", {
                         children: selectedNode && renderField(field, selectedNode.data[field.key], (value)=>handleFieldChange(field.key, value), errors[field.key])
                     }, field.key))
             })

package/dist/canvas/components/NodePropertiesPanel/fields/CheckboxField.cjs

@@ -27,23 +27,24 @@ __webpack_require__.d(__webpack_exports__, {
     CheckboxField: ()=>CheckboxField_CheckboxField
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../layouts/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_NodePropertiesPanel_styles_cjs_namespaceObject = require("../NodePropertiesPanel.styles.cjs");
 const CheckboxField_CheckboxField = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ field, value, onChange, error }) {
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         onChange(e.target.checked);
     }, [
         onChange
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-        gap: 4,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-1",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.CheckboxContainer, {
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodePropertiesPanel_styles_cjs_namespaceObject.CheckboxLabel, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: (0, apollo_wind_namespaceObject.cn)('py-2 rounded transition', field.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-(--canvas-background-hover)'),
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("label", {
+                    className: (0, apollo_wind_namespaceObject.cn)('flex items-center text-[13px] text-(--canvas-foreground) select-none', field.disabled ? 'cursor-not-allowed' : 'cursor-pointer'),
                     children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.CheckboxInput, {
-                            className: "nodrag",
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                            className: "nodrag size-[18px] mr-2 cursor-pointer disabled:cursor-not-allowed accent-(--canvas-primary)",
                             type: "checkbox",
                             checked: !!value,
                             onChange: handleChange,
@@ -53,21 +54,18 @@ const CheckboxField_CheckboxField = /*#__PURE__*/ (0, external_react_namespaceOb
                             children: field.label
                         }),
                         field.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            style: {
-                                marginLeft: '8px'
-                            },
+                            className: "ml-2",
                             children: field.icon
                         })
                     ]
                 })
             }),
-            field.helpText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.CheckboxHelpText, {
+            field.helpText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[12px] text-(--canvas-foreground-de-emp) block ml-[26px]",
                 children: field.helpText
             }),
-            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldError, {
-                style: {
-                    marginLeft: '26px'
-                },
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[12px] text-(--canvas-error-text) block ml-[26px]",
                 children: error
             })
         ]

package/dist/canvas/components/NodePropertiesPanel/fields/CheckboxField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/fields/CheckboxField.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0DAgCxB,CAAC"}
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/fields/CheckboxField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,0DAgDxB,CAAC"}

package/dist/canvas/components/NodePropertiesPanel/fields/CheckboxField.js

@@ -1,21 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Column } from "../../../layouts/index.js";
+import { cn } from "@uipath/apollo-wind";
 import { memo, useCallback } from "react";
-import { CheckboxContainer, CheckboxHelpText, CheckboxInput, CheckboxLabel, FieldError } from "../NodePropertiesPanel.styles.js";
 const CheckboxField_CheckboxField = /*#__PURE__*/ memo(function({ field, value, onChange, error }) {
     const handleChange = useCallback((e)=>{
         onChange(e.target.checked);
     }, [
         onChange
     ]);
-    return /*#__PURE__*/ jsxs(Column, {
-        gap: 4,
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-1",
         children: [
-            /*#__PURE__*/ jsx(CheckboxContainer, {
-                children: /*#__PURE__*/ jsxs(CheckboxLabel, {
+            /*#__PURE__*/ jsx("div", {
+                className: cn('py-2 rounded transition', field.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-(--canvas-background-hover)'),
+                children: /*#__PURE__*/ jsxs("label", {
+                    className: cn('flex items-center text-[13px] text-(--canvas-foreground) select-none', field.disabled ? 'cursor-not-allowed' : 'cursor-pointer'),
                     children: [
-                        /*#__PURE__*/ jsx(CheckboxInput, {
-                            className: "nodrag",
+                        /*#__PURE__*/ jsx("input", {
+                            className: "nodrag size-[18px] mr-2 cursor-pointer disabled:cursor-not-allowed accent-(--canvas-primary)",
                             type: "checkbox",
                             checked: !!value,
                             onChange: handleChange,
@@ -25,21 +26,18 @@ const CheckboxField_CheckboxField = /*#__PURE__*/ memo(function({ field, value,
                             children: field.label
                         }),
                         field.icon && /*#__PURE__*/ jsx("span", {
-                            style: {
-                                marginLeft: '8px'
-                            },
+                            className: "ml-2",
                             children: field.icon
                         })
                     ]
                 })
             }),
-            field.helpText && /*#__PURE__*/ jsx(CheckboxHelpText, {
+            field.helpText && /*#__PURE__*/ jsx("span", {
+                className: "text-[12px] text-(--canvas-foreground-de-emp) block ml-[26px]",
                 children: field.helpText
             }),
-            error && /*#__PURE__*/ jsx(FieldError, {
-                style: {
-                    marginLeft: '26px'
-                },
+            error && /*#__PURE__*/ jsx("span", {
+                className: "text-[12px] text-(--canvas-error-text) block ml-[26px]",
                 children: error
             })
         ]

package/dist/canvas/components/NodePropertiesPanel/fields/NumberField.cjs

@@ -27,9 +27,8 @@ __webpack_require__.d(__webpack_exports__, {
     NumberField: ()=>NumberField_NumberField
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../layouts/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const external_NodePropertiesPanel_styles_cjs_namespaceObject = require("../NodePropertiesPanel.styles.cjs");
 const NumberField_NumberField = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ field, value, onChange, error }) {
     const [localValue, setLocalValue] = (0, external_react_namespaceObject.useState)(value ?? field.defaultValue ?? '');
     const debounceTimer = (0, external_react_namespaceObject.useRef)(null);
@@ -66,16 +65,20 @@ const NumberField_NumberField = /*#__PURE__*/ (0, external_react_namespaceObject
         field.debounce,
         onChange
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-        gap: 4,
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-1",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldLabel, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("label", {
+                htmlFor: `field-${field.key}`,
+                className: "text-[13px] text-(--canvas-foreground-de-emp)",
                 children: field.label
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodePropertiesPanel_styles_cjs_namespaceObject.InputWrapper, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center gap-2",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.NumberInput, {
-                        className: "nodrag",
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                        id: `field-${field.key}`,
+                        className: (0, apollo_wind_namespaceObject.cn)('nodrag flex-1 px-3 py-2 text-[13px] font-mono border border-(--canvas-border) rounded bg-(--canvas-background) text-(--canvas-foreground) outline-none transition-colors', 'focus:border-(--canvas-primary)', 'disabled:opacity-50 disabled:cursor-not-allowed', '[appearance:textfield] [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden', error && 'border-(--canvas-error)'),
                         type: "number",
                         value: localValue,
                         onChange: handleChange,
@@ -83,21 +86,20 @@ const NumberField_NumberField = /*#__PURE__*/ (0, external_react_namespaceObject
                         disabled: field.disabled,
                         min: field.min,
                         max: field.max,
-                        step: field.step,
-                        hasError: !!error,
-                        style: {
-                            flex: 1
-                        }
+                        step: field.step
                     }),
-                    field.suffix && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.InputSuffix, {
+                    field.suffix && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "shrink-0 text-[13px] text-(--canvas-foreground-de-emp) whitespace-nowrap",
                         children: field.suffix
                     })
                 ]
             }),
-            field.helpText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldHelpText, {
+            field.helpText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[12px] text-(--canvas-foreground-de-emp) block",
                 children: field.helpText
             }),
-            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldError, {
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[12px] text-(--canvas-error-text) block",
                 children: error
             })
         ]

package/dist/canvas/components/NodePropertiesPanel/fields/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/fields/NumberField.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,wDAyEtB,CAAC"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/fields/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,wDA0FtB,CAAC"}

package/dist/canvas/components/NodePropertiesPanel/fields/NumberField.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Column } from "../../../layouts/index.js";
+import { cn } from "@uipath/apollo-wind";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { FieldError, FieldHelpText, FieldLabel, InputSuffix, InputWrapper, NumberInput } from "../NodePropertiesPanel.styles.js";
 const NumberField_NumberField = /*#__PURE__*/ memo(function({ field, value, onChange, error }) {
     const [localValue, setLocalValue] = useState(value ?? field.defaultValue ?? '');
     const debounceTimer = useRef(null);
@@ -38,16 +37,20 @@ const NumberField_NumberField = /*#__PURE__*/ memo(function({ field, value, onCh
         field.debounce,
         onChange
     ]);
-    return /*#__PURE__*/ jsxs(Column, {
-        gap: 4,
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-1",
         children: [
-            /*#__PURE__*/ jsx(FieldLabel, {
+            /*#__PURE__*/ jsx("label", {
+                htmlFor: `field-${field.key}`,
+                className: "text-[13px] text-(--canvas-foreground-de-emp)",
                 children: field.label
             }),
-            /*#__PURE__*/ jsxs(InputWrapper, {
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2",
                 children: [
-                    /*#__PURE__*/ jsx(NumberInput, {
-                        className: "nodrag",
+                    /*#__PURE__*/ jsx("input", {
+                        id: `field-${field.key}`,
+                        className: cn('nodrag flex-1 px-3 py-2 text-[13px] font-mono border border-(--canvas-border) rounded bg-(--canvas-background) text-(--canvas-foreground) outline-none transition-colors', 'focus:border-(--canvas-primary)', 'disabled:opacity-50 disabled:cursor-not-allowed', '[appearance:textfield] [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden', error && 'border-(--canvas-error)'),
                         type: "number",
                         value: localValue,
                         onChange: handleChange,
@@ -55,21 +58,20 @@ const NumberField_NumberField = /*#__PURE__*/ memo(function({ field, value, onCh
                         disabled: field.disabled,
                         min: field.min,
                         max: field.max,
-                        step: field.step,
-                        hasError: !!error,
-                        style: {
-                            flex: 1
-                        }
+                        step: field.step
                     }),
-                    field.suffix && /*#__PURE__*/ jsx(InputSuffix, {
+                    field.suffix && /*#__PURE__*/ jsx("span", {
+                        className: "shrink-0 text-[13px] text-(--canvas-foreground-de-emp) whitespace-nowrap",
                         children: field.suffix
                     })
                 ]
             }),
-            field.helpText && /*#__PURE__*/ jsx(FieldHelpText, {
+            field.helpText && /*#__PURE__*/ jsx("span", {
+                className: "text-[12px] text-(--canvas-foreground-de-emp) block",
                 children: field.helpText
             }),
-            error && /*#__PURE__*/ jsx(FieldError, {
+            error && /*#__PURE__*/ jsx("span", {
+                className: "text-[12px] text-(--canvas-error-text) block",
                 children: error
             })
         ]

package/dist/canvas/components/NodePropertiesPanel/fields/SelectField.cjs

@@ -27,43 +27,61 @@ __webpack_require__.d(__webpack_exports__, {
     SelectField: ()=>SelectField_SelectField
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../layouts/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const external_NodePropertiesPanel_styles_cjs_namespaceObject = require("../NodePropertiesPanel.styles.cjs");
 const SelectField_SelectField = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ field, value, onChange, error }) {
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
-        onChange(e.target.value);
+        const raw = e.target.value;
+        const matched = field.options?.find((o)=>String(o.value) === raw);
+        onChange(matched ? matched.value : raw);
     }, [
+        field.options,
         onChange
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
-        gap: 4,
+    const selectId = `field-${field.key}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: "flex flex-col gap-1",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldLabel, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("label", {
+                htmlFor: selectId,
+                className: "text-[13px] text-(--canvas-foreground-de-emp)",
                 children: field.label
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodePropertiesPanel_styles_cjs_namespaceObject.SelectInput, {
-                className: "nodrag",
-                value: value || field.defaultValue || '',
-                onChange: handleChange,
-                disabled: field.disabled,
-                hasError: !!error,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "relative",
                 children: [
-                    field.placeholder && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("option", {
-                        value: "",
-                        disabled: true,
-                        children: field.placeholder
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("select", {
+                        id: selectId,
+                        className: (0, apollo_wind_namespaceObject.cn)('nodrag w-full px-3 py-2 pr-8 text-[13px] border border-(--canvas-border) rounded bg-(--canvas-background) text-(--canvas-foreground) outline-none transition-colors appearance-none cursor-pointer', 'focus:border-(--canvas-primary)', 'disabled:opacity-50 disabled:cursor-not-allowed', error && 'border-(--canvas-error)'),
+                        value: value ?? field.defaultValue ?? '',
+                        onChange: handleChange,
+                        disabled: field.disabled,
+                        children: [
+                            field.placeholder && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("option", {
+                                value: "",
+                                disabled: true,
+                                children: field.placeholder
+                            }),
+                            field.options?.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("option", {
+                                    value: option.value,
+                                    children: option.label
+                                }, option.value))
+                        ]
                     }),
-                    field.options?.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("option", {
-                            value: option.value,
-                            children: option.label
-                        }, option.value))
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                        size: 14,
+                        className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-(--canvas-foreground-de-emp)",
+                        "aria-hidden": true
+                    })
                 ]
             }),
-            field.helpText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldHelpText, {
+            field.helpText && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[12px] text-(--canvas-foreground-de-emp) block",
                 children: field.helpText
             }),
-            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodePropertiesPanel_styles_cjs_namespaceObject.FieldError, {
+            error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "text-[12px] text-(--canvas-error-text) block",
                 children: error
             })
         ]

package/dist/canvas/components/NodePropertiesPanel/fields/SelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/fields/SelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,wDAsCtB,CAAC"}
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/fields/SelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,wDA8DtB,CAAC"}

package/dist/canvas/components/NodePropertiesPanel/fields/SelectField.js

@@ -1,41 +1,59 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Column } from "../../../layouts/index.js";
+import { cn } from "@uipath/apollo-wind";
+import { ChevronDown } from "lucide-react";
 import { memo, useCallback } from "react";
-import { FieldError, FieldHelpText, FieldLabel, SelectInput } from "../NodePropertiesPanel.styles.js";
 const SelectField_SelectField = /*#__PURE__*/ memo(function({ field, value, onChange, error }) {
     const handleChange = useCallback((e)=>{
-        onChange(e.target.value);
+        const raw = e.target.value;
+        const matched = field.options?.find((o)=>String(o.value) === raw);
+        onChange(matched ? matched.value : raw);
     }, [
+        field.options,
         onChange
     ]);
-    return /*#__PURE__*/ jsxs(Column, {
-        gap: 4,
+    const selectId = `field-${field.key}`;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col gap-1",
         children: [
-            /*#__PURE__*/ jsx(FieldLabel, {
+            /*#__PURE__*/ jsx("label", {
+                htmlFor: selectId,
+                className: "text-[13px] text-(--canvas-foreground-de-emp)",
                 children: field.label
             }),
-            /*#__PURE__*/ jsxs(SelectInput, {
-                className: "nodrag",
-                value: value || field.defaultValue || '',
-                onChange: handleChange,
-                disabled: field.disabled,
-                hasError: !!error,
+            /*#__PURE__*/ jsxs("div", {
+                className: "relative",
                 children: [
-                    field.placeholder && /*#__PURE__*/ jsx("option", {
-                        value: "",
-                        disabled: true,
-                        children: field.placeholder
+                    /*#__PURE__*/ jsxs("select", {
+                        id: selectId,
+                        className: cn('nodrag w-full px-3 py-2 pr-8 text-[13px] border border-(--canvas-border) rounded bg-(--canvas-background) text-(--canvas-foreground) outline-none transition-colors appearance-none cursor-pointer', 'focus:border-(--canvas-primary)', 'disabled:opacity-50 disabled:cursor-not-allowed', error && 'border-(--canvas-error)'),
+                        value: value ?? field.defaultValue ?? '',
+                        onChange: handleChange,
+                        disabled: field.disabled,
+                        children: [
+                            field.placeholder && /*#__PURE__*/ jsx("option", {
+                                value: "",
+                                disabled: true,
+                                children: field.placeholder
+                            }),
+                            field.options?.map((option)=>/*#__PURE__*/ jsx("option", {
+                                    value: option.value,
+                                    children: option.label
+                                }, option.value))
+                        ]
                     }),
-                    field.options?.map((option)=>/*#__PURE__*/ jsx("option", {
-                            value: option.value,
-                            children: option.label
-                        }, option.value))
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        size: 14,
+                        className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-(--canvas-foreground-de-emp)",
+                        "aria-hidden": true
+                    })
                 ]
             }),
-            field.helpText && /*#__PURE__*/ jsx(FieldHelpText, {
+            field.helpText && /*#__PURE__*/ jsx("span", {
+                className: "text-[12px] text-(--canvas-foreground-de-emp) block",
                 children: field.helpText
             }),
-            error && /*#__PURE__*/ jsx(FieldError, {
+            error && /*#__PURE__*/ jsx("span", {
+                className: "text-[12px] text-(--canvas-error-text) block",
                 children: error
             })
         ]