@uipath/apollo-react 6.23.1 → 6.24.0

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.cjs

@@ -0,0 +1,156 @@
+"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__, {
+    CanvasTakeoverModal: ()=>CanvasTakeoverModal
+});
+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 external_react_focus_lock_namespaceObject = require("react-focus-lock");
+var external_react_focus_lock_default = /*#__PURE__*/ __webpack_require__.n(external_react_focus_lock_namespaceObject);
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
+    const titleId = (0, external_react_namespaceObject.useId)();
+    const expandButtonRef = (0, external_react_namespaceObject.useRef)(null);
+    const previouslyFocusedElementRef = (0, external_react_namespaceObject.useRef)(null);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = (0, external_react_namespaceObject.useState)(defaultExpanded);
+    const expanded = controlledExpanded ?? uncontrolledExpanded;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open) return;
+        previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key) onOpenChange?.(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            cancelAnimationFrame(animationFrame);
+            document.removeEventListener('keydown', handleKeyDown);
+            previouslyFocusedElementRef.current?.focus();
+            previouslyFocusedElementRef.current = null;
+        };
+    }, [
+        onOpenChange,
+        open
+    ]);
+    if (!open) return null;
+    const setExpanded = (nextExpanded)=>{
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    };
+    const handleBackdropClick = (event)=>{
+        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, apollo_wind_namespaceObject.cn)('absolute inset-0 z-50 flex items-center justify-center bg-ui-backdrop', expanded ? 'p-0' : 'p-3'),
+        onMouseDown: handleBackdropClick,
+        "data-testid": "canvas-takeover-backdrop",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {
+            autoFocus: false,
+            className: "contents",
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("section", {
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": titleId,
+                "data-expanded": expanded,
+                className: (0, apollo_wind_namespaceObject.cn)('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
+                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                                id: titleId,
+                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
+                                children: title
+                            }),
+                            headerActions,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "-mr-1 flex shrink-0 items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                        ref: expandButtonRef,
+                                        type: "button",
+                                        onClick: ()=>setExpanded(!expanded),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
+                                        title: expanded ? 'Collapse modal' : 'Expand modal',
+                                        children: expanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Minimize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                        type: "button",
+                                        onClick: ()=>onOpenChange?.(false),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": "Close modal",
+                                        title: "Close modal",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex min-h-0 flex-1",
+                        children: [
+                            null != sidebar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
+                                className: (0, apollo_wind_namespaceObject.cn)('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
+                                children: sidebar
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
+                                className: "min-w-0 flex-1 overflow-auto",
+                                children: children
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+exports.CanvasTakeoverModal = __webpack_exports__.CanvasTakeoverModal;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasTakeoverModal"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface CanvasTakeoverModalProps {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: ReactNode;
+    headerActions?: ReactNode;
+    sidebar?: ReactNode;
+    children: ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    sidebarClassName?: string;
+    closeOnBackdropClick?: boolean;
+}
+export declare function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick, }: CanvasTakeoverModalProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CanvasTakeoverModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasTakeoverModal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IAEvC,IAAI,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,KAAK,EAAE,SAAS,CAAC;IAEjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EAAE,kBAAkB,EAC5B,eAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,oBAA2B,GAC5B,EAAE,wBAAwB,kDA2G1B"}

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { Maximize2, Minimize2, X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import react_focus_lock from "react-focus-lock";
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
+    const titleId = useId();
+    const expandButtonRef = useRef(null);
+    const previouslyFocusedElementRef = useRef(null);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+    const expanded = controlledExpanded ?? uncontrolledExpanded;
+    useEffect(()=>{
+        if (!open) return;
+        previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
+        const handleKeyDown = (event)=>{
+            if ('Escape' === event.key) onOpenChange?.(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            cancelAnimationFrame(animationFrame);
+            document.removeEventListener('keydown', handleKeyDown);
+            previouslyFocusedElementRef.current?.focus();
+            previouslyFocusedElementRef.current = null;
+        };
+    }, [
+        onOpenChange,
+        open
+    ]);
+    if (!open) return null;
+    const setExpanded = (nextExpanded)=>{
+        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
+        onExpandedChange?.(nextExpanded);
+    };
+    const handleBackdropClick = (event)=>{
+        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('absolute inset-0 z-50 flex items-center justify-center bg-ui-backdrop', expanded ? 'p-0' : 'p-3'),
+        onMouseDown: handleBackdropClick,
+        "data-testid": "canvas-takeover-backdrop",
+        children: /*#__PURE__*/ jsx(react_focus_lock, {
+            autoFocus: false,
+            className: "contents",
+            children: /*#__PURE__*/ jsxs("section", {
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": titleId,
+                "data-expanded": expanded,
+                className: cn('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
+                children: [
+                    /*#__PURE__*/ jsxs("header", {
+                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
+                        children: [
+                            /*#__PURE__*/ jsx("h2", {
+                                id: titleId,
+                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
+                                children: title
+                            }),
+                            headerActions,
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "-mr-1 flex shrink-0 items-center gap-1",
+                                children: [
+                                    /*#__PURE__*/ jsx("button", {
+                                        ref: expandButtonRef,
+                                        type: "button",
+                                        onClick: ()=>setExpanded(!expanded),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
+                                        title: expanded ? 'Collapse modal' : 'Expand modal',
+                                        children: expanded ? /*#__PURE__*/ jsx(Minimize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        }) : /*#__PURE__*/ jsx(Maximize2, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>onOpenChange?.(false),
+                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+                                        "aria-label": "Close modal",
+                                        title: "Close modal",
+                                        children: /*#__PURE__*/ jsx(X, {
+                                            size: 16,
+                                            strokeWidth: 1.75
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex min-h-0 flex-1",
+                        children: [
+                            null != sidebar && /*#__PURE__*/ jsx("aside", {
+                                className: cn('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
+                                children: sidebar
+                            }),
+                            /*#__PURE__*/ jsx("main", {
+                                className: "min-w-0 flex-1 overflow-auto",
+                                children: children
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+}
+export { CanvasTakeoverModal };

package/dist/canvas/components/CanvasTakeoverModal/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__, {
+    CanvasTakeoverModal: ()=>external_CanvasTakeoverModal_cjs_namespaceObject.CanvasTakeoverModal
+});
+const external_CanvasTakeoverModal_cjs_namespaceObject = require("./CanvasTakeoverModal.cjs");
+exports.CanvasTakeoverModal = __webpack_exports__.CanvasTakeoverModal;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasTakeoverModal"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/CanvasTakeoverModal/index.d.ts

@@ -0,0 +1,3 @@
+export type { CanvasTakeoverModalProps } from './CanvasTakeoverModal';
+export { CanvasTakeoverModal } from './CanvasTakeoverModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/CanvasTakeoverModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/canvas/components/CanvasTakeoverModal/index.js

@@ -0,0 +1,2 @@
+import { CanvasTakeoverModal } from "./CanvasTakeoverModal.js";
+export { CanvasTakeoverModal };

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

@@ -0,0 +1,75 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__, {
+    NodePropertyPanelLayout: ()=>NodePropertyPanelLayout
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+function NodePropertyPanelLayout({ input, properties, output, className }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.ResizablePanelGroup, {
+        orientation: "horizontal",
+        className: (0, apollo_wind_namespaceObject.cn)('overflow-hidden rounded-2xl border border-border-subtle bg-surface shadow-lg', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizablePanel, {
+                defaultSize: "33%",
+                minSize: "15%",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "h-full w-full overflow-hidden",
+                    children: input
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizableHandle, {
+                withHandle: true
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizablePanel, {
+                defaultSize: "34%",
+                minSize: "15%",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "h-full w-full overflow-hidden",
+                    children: properties
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizableHandle, {
+                withHandle: true
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ResizablePanel, {
+                defaultSize: "33%",
+                minSize: "15%",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "h-full w-full overflow-hidden",
+                    children: output
+                })
+            })
+        ]
+    });
+}
+exports.NodePropertyPanelLayout = __webpack_exports__.NodePropertyPanelLayout;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "NodePropertyPanelLayout"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface NodePropertyPanelLayoutProps {
+    input: ReactNode;
+    properties: ReactNode;
+    output: ReactNode;
+    className?: string;
+}
+export declare function NodePropertyPanelLayout({ input, properties, output, className, }: NodePropertyPanelLayoutProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodePropertyPanelLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodePropertyPanelLayout.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanelLayout.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,4BAA4B,2CAsB9B"}

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

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from "@uipath/apollo-wind";
+function NodePropertyPanelLayout({ input, properties, output, className }) {
+    return /*#__PURE__*/ jsxs(ResizablePanelGroup, {
+        orientation: "horizontal",
+        className: cn('overflow-hidden rounded-2xl border border-border-subtle bg-surface shadow-lg', className),
+        children: [
+            /*#__PURE__*/ jsx(ResizablePanel, {
+                defaultSize: "33%",
+                minSize: "15%",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "h-full w-full overflow-hidden",
+                    children: input
+                })
+            }),
+            /*#__PURE__*/ jsx(ResizableHandle, {
+                withHandle: true
+            }),
+            /*#__PURE__*/ jsx(ResizablePanel, {
+                defaultSize: "34%",
+                minSize: "15%",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "h-full w-full overflow-hidden",
+                    children: properties
+                })
+            }),
+            /*#__PURE__*/ jsx(ResizableHandle, {
+                withHandle: true
+            }),
+            /*#__PURE__*/ jsx(ResizablePanel, {
+                defaultSize: "33%",
+                minSize: "15%",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "h-full w-full overflow-hidden",
+                    children: output
+                })
+            })
+        ]
+    });
+}
+export { NodePropertyPanelLayout };

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

@@ -25,20 +25,24 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     PanelFieldLabel: ()=>external_PanelField_cjs_namespaceObject.PanelFieldLabel,
+    NodePropertyPanelLayout: ()=>external_NodePropertyPanelLayout_cjs_namespaceObject.NodePropertyPanelLayout,
     NodePropertyPanel: ()=>external_NodePropertyPanel_cjs_namespaceObject.NodePropertyPanel,
     PanelField: ()=>external_PanelField_cjs_namespaceObject.PanelField,
     ExpressionField: ()=>external_ExpressionField_cjs_namespaceObject.ExpressionField
 });
 const external_ExpressionField_cjs_namespaceObject = require("./ExpressionField.cjs");
 const external_NodePropertyPanel_cjs_namespaceObject = require("./NodePropertyPanel.cjs");
+const external_NodePropertyPanelLayout_cjs_namespaceObject = require("./NodePropertyPanelLayout.cjs");
 const external_PanelField_cjs_namespaceObject = require("./PanelField.cjs");
 exports.ExpressionField = __webpack_exports__.ExpressionField;
 exports.NodePropertyPanel = __webpack_exports__.NodePropertyPanel;
+exports.NodePropertyPanelLayout = __webpack_exports__.NodePropertyPanelLayout;
 exports.PanelField = __webpack_exports__.PanelField;
 exports.PanelFieldLabel = __webpack_exports__.PanelFieldLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "ExpressionField",
     "NodePropertyPanel",
+    "NodePropertyPanelLayout",
     "PanelField",
     "PanelFieldLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

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

@@ -1,6 +1,7 @@
 export type { ExpressionFieldProps, ExpressionMode } from './ExpressionField';
 export { ExpressionField } from './ExpressionField';
 export { NodePropertyPanel } from './NodePropertyPanel';
+export { NodePropertyPanelLayout, type NodePropertyPanelLayoutProps, } from './NodePropertyPanelLayout';
 export type { NodePropertyPanelProps } from './NodePropertyPanel.types';
 export type { PanelFieldLabelProps, PanelFieldProps } from './PanelField';
 export { PanelField, PanelFieldLabel } from './PanelField';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,uBAAuB,EACvB,KAAK,4BAA4B,GAClC,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

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

@@ -1,4 +1,5 @@
 import { ExpressionField } from "./ExpressionField.js";
 import { NodePropertyPanel } from "./NodePropertyPanel.js";
+import { NodePropertyPanelLayout } from "./NodePropertyPanelLayout.js";
 import { PanelField, PanelFieldLabel } from "./PanelField.js";
-export { ExpressionField, NodePropertyPanel, PanelField, PanelFieldLabel };
+export { ExpressionField, NodePropertyPanel, NodePropertyPanelLayout, PanelField, PanelFieldLabel };

package/dist/canvas/components/ToolbarButton.cjs

@@ -27,9 +27,9 @@ __webpack_require__.d(__webpack_exports__, {
     ToolbarButton: ()=>ToolbarButton_ToolbarButton
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_react_namespaceObject = require("react");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
-const ToolbarButton_ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ label, tooltip, testId, onClick, disabled, className, tooltipSide, children }, ref) {
+const external_react_namespaceObject = require("react");
+const ToolbarButton_ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ label, tooltip, testId, onClick, disabled, ariaPressed, className, tooltipSide, children }, ref) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Tooltip, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.TooltipTrigger, {
@@ -38,6 +38,7 @@ const ToolbarButton_ToolbarButton = /*#__PURE__*/ (0, external_react_namespaceOb
                     ref: ref,
                     "data-testid": testId,
                     "aria-label": label,
+                    "aria-pressed": ariaPressed,
                     variant: "ghost",
                     size: "xs",
                     icon: true,

package/dist/canvas/components/ToolbarButton.d.ts

@@ -1,10 +1,11 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { AriaAttributes, MouseEventHandler, ReactNode } from 'react';
 interface ToolbarButtonProps {
     label: string;
     tooltip?: ReactNode;
     testId?: string;
     onClick?: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
+    ariaPressed?: AriaAttributes['aria-pressed'];
     className?: string;
     tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
     children: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/ToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,kHA0BzB,CAAC"}
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/ToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,kHA2BzB,CAAC"}

package/dist/canvas/components/ToolbarButton.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@uipath/apollo-wind";
-const ToolbarButton_ToolbarButton = /*#__PURE__*/ forwardRef(function({ label, tooltip, testId, onClick, disabled, className, tooltipSide, children }, ref) {
+import { forwardRef } from "react";
+const ToolbarButton_ToolbarButton = /*#__PURE__*/ forwardRef(function({ label, tooltip, testId, onClick, disabled, ariaPressed, className, tooltipSide, children }, ref) {
     return /*#__PURE__*/ jsxs(Tooltip, {
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
@@ -10,6 +10,7 @@ const ToolbarButton_ToolbarButton = /*#__PURE__*/ forwardRef(function({ label, t
                     ref: ref,
                     "data-testid": testId,
                     "aria-label": label,
+                    "aria-pressed": ariaPressed,
                     variant: "ghost",
                     size: "xs",
                     icon: true,