@uipath/apollo-react 6.79.0 → 7.0.0

package/dist/canvas/components/NodeVariablesPanel/NodeVariablesPanel.js

@@ -0,0 +1,692 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, cn } from "@uipath/apollo-wind";
+import { ArrowDown, ArrowUp, ChevronDown, MousePointerClick, Pencil, Plus, SquareStack, Trash2, Variable } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
+import { JsonTreeToolbar, JsonTreeView, appendPathSegment, buildJsonTree, collectContainerPaths, flattenJsonTree, isArrayItemTemplateRoot, isPathCollapsed, schemaDisplayType } from "../JsonTree/index.js";
+import { NodeVariableEditDialog } from "./NodeVariableEditDialog.js";
+const SECTIONS = [
+    'inputs',
+    'outputs',
+    'variables',
+    'nodes'
+];
+const isSourceSection = (section)=>'inputs' === section || 'nodes' === section;
+const SECTION_ICONS = {
+    inputs: {
+        Icon: ArrowDown,
+        className: 'text-info'
+    },
+    outputs: {
+        Icon: ArrowUp,
+        className: 'text-success'
+    },
+    variables: {
+        Icon: Variable,
+        className: 'text-chart-purple'
+    },
+    nodes: {
+        Icon: SquareStack,
+        className: 'text-chart-pink'
+    }
+};
+const COUNT_CLASS = 'ml-auto shrink-0 font-mono text-[10px] text-foreground-muted';
+const EMPTY_MESSAGE_CLASS = 'px-3 py-6 text-center text-xs text-foreground-muted';
+const countEntries = (nodes)=>nodes?.filter((node)=>!isArrayItemTemplateRoot(node)).length ?? 0;
+const VIRTUALIZE_THRESHOLD = 500;
+function exceedsVirtualizeThreshold(nodes) {
+    let count = 0;
+    const stack = [
+        ...nodes.slice(0, VIRTUALIZE_THRESHOLD + 1)
+    ];
+    while(stack.length > 0){
+        const node = stack.pop();
+        count += 1;
+        if (count > VIRTUALIZE_THRESHOLD) return true;
+        for (const child of node.children ?? []){
+            stack.push(child);
+            if (stack.length + count > VIRTUALIZE_THRESHOLD) return true;
+        }
+    }
+    return false;
+}
+function objectPaths(nodes) {
+    const paths = [];
+    const stack = [];
+    for(let index = nodes.length - 1; index >= 0; index -= 1)stack.push(nodes[index]);
+    while(stack.length > 0){
+        const node = stack.pop();
+        if ('object' !== node.type || !node.children || 'number' == typeof node.segments[0]) continue;
+        paths.push(node.path);
+        for(let index = node.children.length - 1; index >= 0; index -= 1)stack.push(node.children[index]);
+    }
+    return paths;
+}
+function emptyValueFor(schema) {
+    const type = schemaDisplayType(schema);
+    if ('object' === type) return {};
+    if ('array' === type) return [];
+    return 'null' === type ? null : void 0;
+}
+function buildSourceTree(sources) {
+    const properties = Object.fromEntries(sources.map((source)=>[
+            source.id,
+            source.schema ?? {}
+        ]));
+    const value = Object.fromEntries(sources.flatMap((source)=>{
+        const entry = source.value ?? emptyValueFor(source.schema);
+        return void 0 === entry ? [] : [
+            [
+                source.id,
+                entry
+            ]
+        ];
+    }));
+    return buildJsonTree({
+        schema: {
+            type: 'object',
+            properties
+        },
+        value
+    });
+}
+function useScrollEdges() {
+    const ref = useRef(null);
+    const contentRef = useRef(null);
+    const [edges, setEdges] = useState({
+        top: false,
+        bottom: false
+    });
+    const update = useCallback(()=>{
+        const element = ref.current;
+        if (!element) return;
+        const top = element.scrollTop > 0;
+        const bottom = element.scrollTop + element.clientHeight < element.scrollHeight - 1;
+        setEdges((current)=>current.top === top && current.bottom === bottom ? current : {
+                top,
+                bottom
+            });
+    }, []);
+    useEffect(()=>{
+        const element = ref.current;
+        if (!element) return;
+        update();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(update);
+        observer.observe(element);
+        if (contentRef.current) observer.observe(contentRef.current);
+        return ()=>observer.disconnect();
+    }, [
+        update
+    ]);
+    return {
+        ref,
+        contentRef,
+        edges,
+        onScroll: update
+    };
+}
+function variableTypeOf(schema, value) {
+    const declared = schemaDisplayType(schema);
+    const type = declared && 'null' !== declared ? declared : Array.isArray(value) ? 'array' : null === value ? 'string' : typeof value;
+    return 'number' === type || 'boolean' === type || 'object' === type || 'array' === type ? type : 'string';
+}
+function rowFor(section, node) {
+    return isSourceSection(section) ? {
+        section,
+        nodeId: String(node.segments[0]),
+        node
+    } : {
+        section,
+        node
+    };
+}
+const isTopLevelVariable = ({ section, node })=>('outputs' === section || 'variables' === section) && 1 === node.segments.length && 'string' == typeof node.segments[0];
+function siblingKeys(tree, targetPath) {
+    const keysOf = (nodes)=>new Set(nodes.map((node)=>node.key));
+    if (tree.some((node)=>node.path === targetPath)) return keysOf(tree);
+    const stack = [
+        ...tree
+    ];
+    while(stack.length > 0){
+        const node = stack.pop();
+        if (!node.children) continue;
+        if (node.children.some((child)=>child.path === targetPath)) return keysOf(node.children);
+        for (const child of node.children)stack.push(child);
+    }
+    return new Set();
+}
+function NodeVariablesPanel({ inputs = [], outputs, variables, nodes = [], outputsBasePath, variablesBasePath, referencePrefix = '$vars', pathForCopy, defaultExpandedSections = [
+    'nodes'
+], filters, activeFilterId: activeFilterIdProp, defaultActiveFilterId = null, onActiveFilterChange, onFocusNode, onAdd, isVariableRow = isTopLevelVariable, onEditVariable, onRequestEditVariable, onDeleteVariable, onCopy, leading, rowWrapper, deriveTypeIcon, children, className }) {
+    const { _ } = useSafeLingui();
+    const trees = useMemo(()=>({
+            inputs: buildSourceTree(inputs),
+            outputs: buildJsonTree({
+                schema: outputs?.schema,
+                value: outputs?.value,
+                basePath: outputsBasePath
+            }),
+            variables: buildJsonTree({
+                schema: variables?.schema,
+                value: variables?.value,
+                basePath: variablesBasePath
+            }),
+            nodes: buildSourceTree(nodes)
+        }), [
+        inputs,
+        outputs,
+        outputsBasePath,
+        variables,
+        variablesBasePath,
+        nodes
+    ]);
+    const sourcesById = useMemo(()=>({
+            inputs: new Map(inputs.map((source)=>[
+                    source.id,
+                    source
+                ])),
+            nodes: new Map(nodes.map((source)=>[
+                    source.id,
+                    source
+                ]))
+        }), [
+        inputs,
+        nodes
+    ]);
+    const [openSections, setOpenSections] = useState(()=>new Set(defaultExpandedSections));
+    const [openPaths, setOpenPaths] = useState({
+        inputs: {},
+        outputs: {},
+        variables: {},
+        nodes: {}
+    });
+    const collapsed = useMemo(()=>Object.fromEntries(SECTIONS.map((section)=>[
+                section,
+                Object.fromEntries(collectContainerPaths(trees[section]).map(({ path })=>[
+                        path,
+                        !isPathCollapsed(openPaths[section], path)
+                    ]))
+            ])), [
+        trees,
+        openPaths
+    ]);
+    const virtualize = useMemo(()=>Object.fromEntries(SECTIONS.map((section)=>[
+                section,
+                exceedsVirtualizeThreshold(trees[section])
+            ])), [
+        trees
+    ]);
+    const [scroller, setScroller] = useState(null);
+    const [query, setQuery] = useState('');
+    const [uncontrolledFilterId, setUncontrolledFilterId] = useState(defaultActiveFilterId);
+    const activeFilterId = void 0 !== activeFilterIdProp ? activeFilterIdProp : uncontrolledFilterId;
+    const changeFilter = (id)=>{
+        if (void 0 === activeFilterIdProp) setUncontrolledFilterId(id);
+        onActiveFilterChange?.(id);
+    };
+    const [editing, setEditing] = useState(null);
+    const referenceFor = useCallback((path, segments)=>{
+        const prefixed = referencePrefix && path ? `${referencePrefix}${path.startsWith('[') ? '' : '.'}${path}` : path || referencePrefix;
+        return pathForCopy ? pathForCopy(prefixed, segments) : prefixed;
+    }, [
+        referencePrefix,
+        pathForCopy
+    ]);
+    const search = query.trim();
+    const activeFilter = filters?.find((filter)=>filter.id === activeFilterId);
+    const narrowing = !!search || !!activeFilter;
+    const toolbarFilters = useMemo(()=>filters?.map(({ id, label })=>({
+                id,
+                label,
+                predicate: ()=>true
+            })), [
+        filters
+    ]);
+    const filterPredicates = useMemo(()=>activeFilter ? Object.fromEntries(SECTIONS.map((section)=>[
+                section,
+                (node)=>activeFilter.predicate(rowFor(section, node))
+            ])) : void 0, [
+        activeFilter
+    ]);
+    const decorateSource = useMemo(()=>{
+        const decorate = (section)=>(node)=>{
+                if (1 !== node.segments.length) return;
+                const source = sourcesById[section].get(String(node.segments[0]));
+                if (!source) return;
+                const count = source.outputCount ?? countEntries(node.children);
+                const countLabel = _({
+                    id: 'canvas.node_variables_panel.node_output_count',
+                    message: '{count, plural, one {# output} other {# outputs}}',
+                    values: {
+                        count
+                    }
+                });
+                return {
+                    label: source.label,
+                    sublabel: source.id,
+                    sublabelOnHover: true,
+                    badge: {
+                        icon: source.icon
+                    },
+                    hideCount: true,
+                    hideValue: true,
+                    meta: /*#__PURE__*/ jsx(CanvasTooltip, {
+                        content: countLabel,
+                        placement: "top",
+                        delay: true,
+                        children: /*#__PURE__*/ jsxs("span", {
+                            role: "img",
+                            "aria-label": countLabel,
+                            className: COUNT_CLASS,
+                            children: [
+                                "(",
+                                count,
+                                ")"
+                            ]
+                        })
+                    })
+                };
+            };
+        return {
+            inputs: decorate('inputs'),
+            nodes: decorate('nodes')
+        };
+    }, [
+        sourcesById,
+        _
+    ]);
+    const visibleCount = useMemo(()=>Object.fromEntries(SECTIONS.map((section)=>[
+                section,
+                narrowing ? flattenJsonTree(trees[section], {
+                    collapsed: {},
+                    query: search,
+                    filterPredicate: filterPredicates?.[section],
+                    displayTexts: isSourceSection(section) ? decorateSource[section] : void 0
+                }).length : 1
+            ])), [
+        narrowing,
+        trees,
+        search,
+        filterPredicates,
+        decorateSource
+    ]);
+    const totalCount = {
+        inputs: inputs.length,
+        outputs: countEntries(trees.outputs),
+        variables: countEntries(trees.variables),
+        nodes: nodes.length
+    };
+    const sectionOpen = (section)=>narrowing || openSections.has(section);
+    const setSectionOpen = (section, open)=>setOpenSections((current)=>{
+            const next = new Set(current);
+            if (open) next.add(section);
+            else next.delete(section);
+            return next;
+        });
+    const toggleCollapsed = (section)=>(path)=>setOpenPaths((current)=>({
+                    ...current,
+                    [section]: {
+                        ...current[section],
+                        [path]: isPathCollapsed(collapsed[section], path)
+                    }
+                }));
+    const expandableSections = SECTIONS.filter((section)=>totalCount[section] > 0);
+    const expandablePaths = useMemo(()=>Object.fromEntries(SECTIONS.map((section)=>[
+                section,
+                objectPaths(trees[section])
+            ])), [
+        trees
+    ]);
+    const allExpanded = expandableSections.length > 0 && expandableSections.every((section)=>openSections.has(section)) && SECTIONS.every((section)=>expandablePaths[section].every((path)=>!isPathCollapsed(collapsed[section], path)));
+    const toggleAll = ()=>{
+        const open = !allExpanded;
+        setOpenSections(open ? new Set(expandableSections) : new Set());
+        setOpenPaths((current)=>Object.fromEntries(SECTIONS.map((section)=>[
+                    section,
+                    {
+                        ...current[section],
+                        ...Object.fromEntries(expandablePaths[section].map((path)=>[
+                                path,
+                                open
+                            ]))
+                    }
+                ])));
+    };
+    const sourceActions = (section)=>(node, ctx)=>{
+            if (1 !== node.segments.length) return ctx.defaultActions;
+            const source = sourcesById[section].get(String(node.segments[0]));
+            const label = source?.label ?? node.key;
+            const actions = [];
+            if (onAdd && source?.addable !== false) actions.push({
+                id: 'add-to-node',
+                icon: /*#__PURE__*/ jsx(Plus, {}),
+                label: _({
+                    id: 'canvas.node_variables_panel.add_to_node_label',
+                    message: 'Add from {label}',
+                    values: {
+                        label
+                    }
+                }),
+                tooltip: _({
+                    id: 'canvas.node_variables_panel.add_to_node',
+                    message: 'Add'
+                }),
+                persistent: true,
+                onSelect: ()=>onAdd(section, node.key)
+            });
+            if (onFocusNode) actions.unshift({
+                id: 'focus-node',
+                icon: /*#__PURE__*/ jsx(MousePointerClick, {}),
+                label: _({
+                    id: 'canvas.node_variables_panel.focus_node_label',
+                    message: 'Focus on {label}',
+                    values: {
+                        label
+                    }
+                }),
+                tooltip: _({
+                    id: 'canvas.node_variables_panel.focus_node',
+                    message: 'Focus on node'
+                }),
+                persistent: true,
+                placement: 'start',
+                onSelect: ()=>onFocusNode(node.key)
+            });
+            return actions;
+        };
+    const openEditDialog = (row)=>{
+        const { schema, value } = row.node;
+        setEditing({
+            row,
+            details: {
+                id: row.node.key,
+                type: variableTypeOf(schema, value),
+                description: schema?.description,
+                defaultValue: schema && Object.hasOwn(schema, 'default') ? schema.default : value
+            }
+        });
+    };
+    const variableActions = (row, ctx)=>{
+        const { node } = row;
+        const actions = [
+            ...ctx.defaultActions
+        ];
+        if (onRequestEditVariable || onEditVariable) actions.push({
+            id: 'edit-variable',
+            icon: /*#__PURE__*/ jsx(Pencil, {}),
+            label: _({
+                id: 'canvas.node_variables_panel.edit_variable',
+                message: 'Edit {name}',
+                values: {
+                    name: node.key
+                }
+            }),
+            onSelect: ()=>onRequestEditVariable ? onRequestEditVariable(row) : openEditDialog(row)
+        });
+        if (onDeleteVariable) actions.push({
+            id: 'delete-variable',
+            icon: /*#__PURE__*/ jsx(Trash2, {}),
+            label: _({
+                id: 'canvas.node_variables_panel.delete_variable',
+                message: 'Delete {name}',
+                values: {
+                    name: node.key
+                }
+            }),
+            tone: 'error',
+            onSelect: ()=>onDeleteVariable(row)
+        });
+        return actions;
+    };
+    const actionsFor = (section)=>(node, ctx)=>{
+            if (isSourceSection(section) && 1 === node.segments.length) return sourceActions(section)(node, ctx);
+            const row = rowFor(section, node);
+            return !node.isArrayItemTemplate && isVariableRow(row) ? variableActions(row, ctx) : ctx.defaultActions;
+        };
+    const renamedReference = ({ section, node })=>(id)=>{
+            const basePath = 'outputs' === section ? outputsBasePath ?? '' : 'variables' === section ? variablesBasePath ?? '' : '';
+            const parentSegments = node.segments.slice(0, -1);
+            const path = [
+                ...parentSegments,
+                id
+            ].reduce(appendPathSegment, basePath);
+            return referenceFor(path, [
+                ...parentSegments,
+                id
+            ]);
+        };
+    const sectionName = {
+        inputs: _({
+            id: 'canvas.node_variables_panel.section_inputs',
+            message: 'Inputs'
+        }),
+        outputs: _({
+            id: 'canvas.node_variables_panel.section_outputs',
+            message: 'Outputs'
+        }),
+        variables: _({
+            id: 'canvas.node_variables_panel.section_variables',
+            message: 'Variables'
+        }),
+        nodes: _({
+            id: 'canvas.node_variables_panel.section_nodes',
+            message: 'Nodes'
+        })
+    };
+    const sectionCountLabel = (section, count)=>({
+            inputs: _({
+                id: 'canvas.node_variables_panel.count_inputs',
+                message: '{count, plural, one {# input} other {# inputs}}',
+                values: {
+                    count
+                }
+            }),
+            outputs: _({
+                id: 'canvas.node_variables_panel.count_outputs',
+                message: '{count, plural, one {# output} other {# outputs}}',
+                values: {
+                    count
+                }
+            }),
+            variables: _({
+                id: 'canvas.node_variables_panel.count_variables',
+                message: '{count, plural, one {# variable} other {# variables}}',
+                values: {
+                    count
+                }
+            }),
+            nodes: _({
+                id: 'canvas.node_variables_panel.count_nodes',
+                message: '{count, plural, one {# node} other {# nodes}}',
+                values: {
+                    count
+                }
+            })
+        })[section];
+    const addLabel = (section)=>({
+            outputs: _({
+                id: 'canvas.node_variables_panel.add_outputs',
+                message: 'Add outputs'
+            }),
+            variables: _({
+                id: 'canvas.node_variables_panel.add_variables',
+                message: 'Add variables'
+            })
+        })[section];
+    const renderTree = (section)=>/*#__PURE__*/ jsx(JsonTreeView, {
+            nodes: trees[section],
+            collapsed: search ? {} : collapsed[section],
+            onToggleCollapsed: search ? void 0 : toggleCollapsed(section),
+            query: search,
+            filterPredicate: filterPredicates?.[section],
+            readOnly: true,
+            decorateNode: isSourceSection(section) ? decorateSource[section] : void 0,
+            deriveTypeIcon: deriveTypeIcon,
+            rowWrapper: rowWrapper,
+            nodeActions: actionsFor(section),
+            maxInlineActions: 4,
+            pathForCopy: referenceFor,
+            onCopy: onCopy,
+            virtualized: virtualize[section],
+            scrollElement: virtualize[section] ? scroller : void 0,
+            className: "h-auto py-1"
+        });
+    const renderSection = (section)=>{
+        if (narrowing && 0 === visibleCount[section]) return null;
+        const open = sectionOpen(section);
+        const name = sectionName[section];
+        const count = totalCount[section];
+        const { Icon, className: iconClassName } = SECTION_ICONS[section];
+        const addable = ('outputs' === section || 'variables' === section) && onAdd ? section : null;
+        return /*#__PURE__*/ jsx(Collapsible, {
+            open: open,
+            onOpenChange: (next)=>setSectionOpen(section, next),
+            disabled: narrowing,
+            asChild: true,
+            children: /*#__PURE__*/ jsxs("section", {
+                "aria-label": name,
+                className: "mb-2 overflow-hidden rounded-lg border border-surface-overlay bg-surface-overlay/40",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: cn('flex h-9 items-center gap-2 pr-1 pl-2', open && trees[section].length > 0 && 'border-b border-surface-overlay/80'),
+                        children: [
+                            /*#__PURE__*/ jsxs(CollapsibleTrigger, {
+                                className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left disabled:cursor-default",
+                                children: [
+                                    /*#__PURE__*/ jsx(ChevronDown, {
+                                        size: 10,
+                                        className: cn('shrink-0 text-foreground-subtle transition-transform', !open && '-rotate-90')
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: cn('grid size-4.5 shrink-0 place-items-center', iconClassName),
+                                        "aria-hidden": "true",
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            size: 14
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "truncate text-xs font-semibold tracking-[0.02em] text-foreground",
+                                        children: name
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(CanvasTooltip, {
+                                content: sectionCountLabel(section, count),
+                                placement: "top",
+                                delay: true,
+                                children: /*#__PURE__*/ jsxs("span", {
+                                    role: "img",
+                                    "aria-label": sectionCountLabel(section, count),
+                                    className: COUNT_CLASS,
+                                    children: [
+                                        "(",
+                                        count,
+                                        ")"
+                                    ]
+                                })
+                            }),
+                            addable && /*#__PURE__*/ jsx(Button, {
+                                variant: "ghost",
+                                size: "4xs",
+                                icon: true,
+                                "aria-label": addLabel(addable),
+                                onClick: ()=>onAdd?.(addable),
+                                className: "shrink-0 rounded text-foreground-subtle hover:bg-surface-raised hover:text-foreground [&_svg]:size-2.75",
+                                children: /*#__PURE__*/ jsx(Plus, {})
+                            }),
+                            onAdd && !addable && /*#__PURE__*/ jsx("span", {
+                                "aria-hidden": "true",
+                                className: "size-5 shrink-0"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(CollapsibleContent, {
+                        className: "bg-surface/30",
+                        children: trees[section].length > 0 && renderTree(section)
+                    })
+                ]
+            })
+        }, section);
+    };
+    const { ref: scrollRef, contentRef, edges, onScroll } = useScrollEdges();
+    const setScrollRef = useCallback((element)=>{
+        scrollRef.current = element;
+        setScroller(element);
+    }, [
+        scrollRef
+    ]);
+    const nothingVisible = narrowing && SECTIONS.every((section)=>0 === visibleCount[section]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('flex min-h-0 flex-1 flex-col', className),
+        children: [
+            /*#__PURE__*/ jsx(JsonTreeToolbar, {
+                query: query,
+                onQueryChange: setQuery,
+                searchPlaceholder: _({
+                    id: 'canvas.node_variables_panel.search_placeholder',
+                    message: 'Search variables'
+                }),
+                filters: toolbarFilters,
+                activeFilterId: activeFilter ? activeFilterId : null,
+                onFilterChange: changeFilter,
+                allCollapsed: !allExpanded,
+                onToggleAll: search ? void 0 : toggleAll,
+                leading: leading,
+                className: "shrink-0 pt-4 pb-2 [padding-inline:var(--mf-content-inset,1rem)]"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "min-h-0 flex-1 overflow-hidden text-foreground",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "relative mt-1 mb-4 h-[calc(100%-1.25rem)] min-h-0 [margin-inline:var(--mf-content-inset,1rem)]",
+                    children: [
+                        edges.top && /*#__PURE__*/ jsx("div", {
+                            "aria-hidden": "true",
+                            "data-edge": "top",
+                            className: "pointer-events-none absolute inset-x-0 top-0 z-10 h-2 rounded-t-lg border-t border-surface-overlay"
+                        }),
+                        edges.bottom && /*#__PURE__*/ jsx("div", {
+                            "aria-hidden": "true",
+                            "data-edge": "bottom",
+                            className: "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-2 rounded-b-lg border-b border-surface-overlay"
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            ref: setScrollRef,
+                            onScroll: onScroll,
+                            className: "h-full min-h-0 overflow-y-auto rounded-lg pb-1",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                ref: contentRef,
+                                children: [
+                                    SECTIONS.map(renderSection),
+                                    nothingVisible && /*#__PURE__*/ jsx("p", {
+                                        className: EMPTY_MESSAGE_CLASS,
+                                        children: search ? _({
+                                            id: 'canvas.node_variables_panel.no_matches',
+                                            message: 'No variables match your search.'
+                                        }) : activeFilter?.emptyMessage ?? _({
+                                            id: 'canvas.node_variables_panel.filter_empty',
+                                            message: 'No variables match this filter.'
+                                        })
+                                    }),
+                                    children
+                                ]
+                            })
+                        })
+                    ]
+                })
+            }),
+            editing && onEditVariable && /*#__PURE__*/ jsx(NodeVariableEditDialog, {
+                variable: editing.details,
+                takenNames: siblingKeys(trees[editing.row.section], editing.row.node.path),
+                referenceFor: renamedReference(editing.row),
+                onSave: (next)=>{
+                    onEditVariable(editing.row, next);
+                    setEditing(null);
+                },
+                onClose: ()=>setEditing(null)
+            }, editing.row.node.path)
+        ]
+    });
+}
+export { NodeVariablesPanel };