@uipath/apollo-react 6.19.2 → 6.20.0

package/dist/canvas/components/JsonTree/RowActions.cjs

@@ -29,6 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const ACTION_BUTTON_CLASS = 'shrink-0 rounded text-foreground-subtle opacity-0 hover:text-foreground hover:bg-surface-raised group-hover:opacity-100 focus-visible:opacity-100';
@@ -40,10 +41,11 @@ const ACTION_TONE_CLASS = {
 };
 function RowActions({ node, actions, maxInline }) {
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const [menuOpen, setMenuOpen] = (0, external_react_namespaceObject.useState)(false);
     if (0 === actions.length) return null;
     const overflowing = actions.length > maxInline;
-    const inline = overflowing ? actions.slice(0, maxInline - 1) : actions;
-    const overflow = overflowing ? actions.slice(maxInline - 1) : [];
+    const inline = overflowing ? [] : actions;
+    const overflow = overflowing ? actions : [];
     const moreLabel = _({
         id: 'canvas.json_value_panel.more_actions',
         message: 'More actions'
@@ -67,11 +69,14 @@ function RowActions({ node, actions, maxInline }) {
                     })
                 }, action.id)),
             overflow.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DropdownMenu, {
+                open: menuOpen,
+                onOpenChange: setMenuOpen,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                         content: moreLabel,
                         placement: "top",
                         delay: true,
+                        hide: menuOpen,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuTrigger, {
                             asChild: true,
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
@@ -79,13 +84,15 @@ function RowActions({ node, actions, maxInline }) {
                                 size: "4xs",
                                 icon: true,
                                 "aria-label": moreLabel,
-                                className: (0, apollo_wind_namespaceObject.cn)(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75'),
+                                className: (0, apollo_wind_namespaceObject.cn)(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75', menuOpen && 'opacity-100'),
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MoreHorizontal, {})
                             })
                         })
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DropdownMenuContent, {
-                        align: "end",
+                        side: "left",
+                        align: "start",
+                        sideOffset: -12,
                         className: "min-w-40",
                         children: overflow.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DropdownMenuItem, {
                                 disabled: action.disabled,

package/dist/canvas/components/JsonTree/RowActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/RowActions.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAsB,MAAM,kBAAkB,CAAC;AAYrF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,YAAY,CAAC;IAEnB,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAQD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,eAAe,kDA4EvE"}
+{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/RowActions.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAsB,MAAM,kBAAkB,CAAC;AAYrF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,YAAY,CAAC;IAEnB,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAQD,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,eAAe,kDA6EvE"}

package/dist/canvas/components/JsonTree/RowActions.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, cn } from "@uipath/apollo-wind";
 import { MoreHorizontal } from "lucide-react";
+import { useState } from "react";
 import { useSafeLingui } from "../../../i18n/index.js";
 import { CanvasTooltip } from "../CanvasTooltip.js";
 const ACTION_BUTTON_CLASS = 'shrink-0 rounded text-foreground-subtle opacity-0 hover:text-foreground hover:bg-surface-raised group-hover:opacity-100 focus-visible:opacity-100';
@@ -12,10 +13,11 @@ const ACTION_TONE_CLASS = {
 };
 function RowActions({ node, actions, maxInline }) {
     const { _ } = useSafeLingui();
+    const [menuOpen, setMenuOpen] = useState(false);
     if (0 === actions.length) return null;
     const overflowing = actions.length > maxInline;
-    const inline = overflowing ? actions.slice(0, maxInline - 1) : actions;
-    const overflow = overflowing ? actions.slice(maxInline - 1) : [];
+    const inline = overflowing ? [] : actions;
+    const overflow = overflowing ? actions : [];
     const moreLabel = _({
         id: 'canvas.json_value_panel.more_actions',
         message: 'More actions'
@@ -39,11 +41,14 @@ function RowActions({ node, actions, maxInline }) {
                     })
                 }, action.id)),
             overflow.length > 0 && /*#__PURE__*/ jsxs(DropdownMenu, {
+                open: menuOpen,
+                onOpenChange: setMenuOpen,
                 children: [
                     /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: moreLabel,
                         placement: "top",
                         delay: true,
+                        hide: menuOpen,
                         children: /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                             asChild: true,
                             children: /*#__PURE__*/ jsx(Button, {
@@ -51,13 +56,15 @@ function RowActions({ node, actions, maxInline }) {
                                 size: "4xs",
                                 icon: true,
                                 "aria-label": moreLabel,
-                                className: cn(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75'),
+                                className: cn(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75', menuOpen && 'opacity-100'),
                                 children: /*#__PURE__*/ jsx(MoreHorizontal, {})
                             })
                         })
                     }),
                     /*#__PURE__*/ jsx(DropdownMenuContent, {
-                        align: "end",
+                        side: "left",
+                        align: "start",
+                        sideOffset: -12,
                         className: "min-w-40",
                         children: overflow.map((action)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
                                 disabled: action.disabled,

package/dist/canvas/components/NodePropertyPanel/ExpressionField.cjs

@@ -27,8 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
     ExpressionField: ()=>ExpressionField
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_lucide_react_namespaceObject = require("lucide-react");
-function ExpressionField({ label, value, mode = 'expr', description, onModeChange }) {
+function ExpressionField({ label, value, mode = 'expr', description, onModeChange, variables = [], onInsertVariable }) {
     const expression = value ?? '';
     const activeMode = mode;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -53,23 +54,10 @@ function ExpressionField({ label, value, mode = 'expr', description, onModeChang
                                     size: 12
                                 })
                             }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
-                                type: "button",
-                                title: "Insert variable",
-                                "aria-label": "Insert variable",
-                                className: "flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        className: "font-mono text-[10px]",
-                                        children: '{x}'
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        children: "Insert"
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                                        size: 9
-                                    })
-                                ]
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.VariablePicker, {
+                                items: variables,
+                                onSelect: (variable)=>onInsertVariable?.(variable),
+                                disabled: 0 === variables.length || !onInsertVariable
                             })
                         ]
                     })

package/dist/canvas/components/NodePropertyPanel/ExpressionField.d.ts

@@ -1,3 +1,4 @@
+import { type VariablePickerItem } from '@uipath/apollo-wind';
 export type ExpressionMode = 'expr' | 'json';
 export interface ExpressionFieldProps {
     label?: string;
@@ -5,6 +6,8 @@ export interface ExpressionFieldProps {
     mode?: ExpressionMode;
     description?: string;
     onModeChange?: (mode: ExpressionMode) => void;
+    variables?: VariablePickerItem[];
+    onInsertVariable?: (variable: VariablePickerItem) => void;
 }
-export declare function ExpressionField({ label, value, mode, description, onModeChange, }: ExpressionFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpressionField({ label, value, mode, description, onModeChange, variables, onInsertVariable, }: ExpressionFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ExpressionField.d.ts.map

package/dist/canvas/components/NodePropertyPanel/ExpressionField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionField.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/ExpressionField.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,oBAAoB;IAEnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAWD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAa,EACb,WAAW,EACX,YAAY,GACb,EAAE,oBAAoB,2CAiHtB"}
+{"version":3,"file":"ExpressionField.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/ExpressionField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,oBAAoB;IAEnC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAE9C,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAEjC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC3D;AAWD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAc,EACd,gBAAgB,GACjB,EAAE,oBAAoB,2CA4GtB"}

package/dist/canvas/components/NodePropertyPanel/ExpressionField.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, Maximize2, Redo2, Sparkles, Undo2 } from "lucide-react";
-function ExpressionField({ label, value, mode = 'expr', description, onModeChange }) {
+import { VariablePicker } from "@uipath/apollo-wind";
+import { Maximize2, Redo2, Sparkles, Undo2 } from "lucide-react";
+function ExpressionField({ label, value, mode = 'expr', description, onModeChange, variables = [], onInsertVariable }) {
     const expression = value ?? '';
     const activeMode = mode;
     return /*#__PURE__*/ jsxs("div", {
@@ -25,23 +26,10 @@ function ExpressionField({ label, value, mode = 'expr', description, onModeChang
                                     size: 12
                                 })
                             }),
-                            /*#__PURE__*/ jsxs("button", {
-                                type: "button",
-                                title: "Insert variable",
-                                "aria-label": "Insert variable",
-                                className: "flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: "font-mono text-[10px]",
-                                        children: '{x}'
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: "Insert"
-                                    }),
-                                    /*#__PURE__*/ jsx(ChevronDown, {
-                                        size: 9
-                                    })
-                                ]
+                            /*#__PURE__*/ jsx(VariablePicker, {
+                                items: variables,
+                                onSelect: (variable)=>onInsertVariable?.(variable),
+                                disabled: 0 === variables.length || !onInsertVariable
                             })
                         ]
                     })

package/dist/canvas/components/StageNode/tasks/TaskMockedChip.cjs

@@ -51,6 +51,7 @@ function TaskMockedChipInner({ mocked, taskId }) {
                 className: "h-3.5 w-3.5 justify-center rounded-full border-0 bg-primary p-0 text-primary-foreground [&>svg]:size-2.5",
                 "data-testid": `stage-task-mocked-${taskId}`,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FlaskConical, {
+                    size: 10,
                     "aria-hidden": true
                 })
             })

package/dist/canvas/components/StageNode/tasks/TaskMockedChip.js

@@ -23,6 +23,7 @@ function TaskMockedChipInner({ mocked, taskId }) {
                 className: "h-3.5 w-3.5 justify-center rounded-full border-0 bg-primary p-0 text-primary-foreground [&>svg]:size-2.5",
                 "data-testid": `stage-task-mocked-${taskId}`,
                 children: /*#__PURE__*/ jsx(FlaskConical, {
+                    size: 10,
                     "aria-hidden": true
                 })
             })