@uipath/apollo-wind 2.60.1 → 2.61.0

package/dist/components/ui/json-tree-view/JsonTree.js

@@ -0,0 +1,219 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../../../lib/index.js";
+import { flattenJsonTree } from "./buildJsonTree.js";
+import { copyTextToClipboard } from "./clipboard.js";
+import { JsonTreeRow, JsonTreeRowContextProvider, ROW_MIN_HEIGHT_PX } from "./JsonTreeRow.js";
+import { JsonTreeTooltipProvider } from "./JsonTreeTooltip.js";
+import { JsonTreeViewProvider, useJsonTreeViewStrings } from "./strings.js";
+const useIsomorphicLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+const VIRTUAL_OVERSCAN = 10;
+function scrollMarginOf(element, scrollElement) {
+    return Math.round(element.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top + scrollElement.scrollTop);
+}
+function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
+    const [scrollMargin, setScrollMargin] = useState(0);
+    const getItemKey = useCallback((index)=>rows[index]?.node.path ?? index, [
+        rows
+    ]);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: ()=>scrollElement ?? container,
+        estimateSize: ()=>ROW_MIN_HEIGHT_PX,
+        getItemKey,
+        overscan: VIRTUAL_OVERSCAN,
+        scrollMargin
+    });
+    useIsomorphicLayoutEffect(()=>{
+        if (!container || !scrollElement) {
+            if (0 !== scrollMargin) setScrollMargin(0);
+            return;
+        }
+        if (virtualizer.isScrolling) return;
+        const next = scrollMarginOf(container, scrollElement);
+        if (next !== scrollMargin) setScrollMargin(next);
+    });
+    const isPinning = pinnedPaths.length > 0;
+    const indexByPath = useMemo(()=>{
+        if (!isPinning) return;
+        const byPath = new Map();
+        for (const [index, row] of rows.entries())byPath.set(row.node.path, index);
+        return byPath;
+    }, [
+        isPinning,
+        rows
+    ]);
+    const items = virtualizer.getVirtualItems();
+    const firstWindowed = items[0]?.index ?? -1;
+    const lastWindowed = items[items.length - 1]?.index ?? -2;
+    const pinnedItems = [];
+    if (indexByPath) for (const path of pinnedPaths){
+        const index = indexByPath.get(path);
+        if (void 0 === index || index >= firstWindowed && index <= lastWindowed) continue;
+        const measurement = virtualizer.measurementsCache[index];
+        if (measurement) pinnedItems.push(measurement);
+    }
+    const rendered = 0 === pinnedItems.length ? items : [
+        ...pinnedItems.filter((item)=>item.index < firstWindowed),
+        ...items,
+        ...pinnedItems.filter((item)=>item.index > lastWindowed)
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        className: "relative",
+        style: {
+            height: virtualizer.getTotalSize()
+        },
+        children: rendered.map((item)=>{
+            const row = rows[item.index];
+            if (!row) return null;
+            return /*#__PURE__*/ jsx("div", {
+                "data-index": item.index,
+                ref: virtualizer.measureElement,
+                className: "absolute top-0 left-0 w-full",
+                style: {
+                    transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+                },
+                children: /*#__PURE__*/ jsx(JsonTreeRow, {
+                    node: row.node,
+                    depth: row.depth
+                })
+            }, item.key);
+        })
+    });
+}
+function valueAsText(node) {
+    if ('string' == typeof node.value) return node.value;
+    if (void 0 === node.value) return 'null';
+    return JSON.stringify(node.value, null, 2);
+}
+const DefaultRowWrapper = ({ className, style, onClick, children })=>/*#__PURE__*/ jsx("div", {
+        className: className,
+        style: style,
+        onClick: onClick,
+        children: children
+    });
+function JsonTreeView({ strings, tooltipContentClassName, ...props }) {
+    return /*#__PURE__*/ jsx(JsonTreeViewProvider, {
+        strings: strings,
+        tooltipContentClassName: tooltipContentClassName,
+        children: /*#__PURE__*/ jsx(JsonTreeViewContent, {
+            ...props
+        })
+    });
+}
+function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, className }) {
+    const strings = useJsonTreeViewStrings();
+    const [container, setContainer] = useState(null);
+    const usesAncestorScroller = virtualized && !!scrollElement;
+    const RowWrapper = rowWrapper ?? DefaultRowWrapper;
+    const [editingPath, setEditingPath] = useState(null);
+    const [jsonEditingPath, setJsonEditingPath] = useState(null);
+    const [wrappedPaths, setWrappedPaths] = useState({});
+    const pinnedPaths = useMemo(()=>[
+            ...new Set([
+                editingPath,
+                jsonEditingPath
+            ].filter((path)=>null !== path))
+        ], [
+        editingPath,
+        jsonEditingPath
+    ]);
+    const [copied, setCopied] = useState(null);
+    const copyTimerRef = useRef(null);
+    useEffect(()=>()=>{
+            if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+        }, []);
+    const copy = (node, kind, text)=>{
+        copyTextToClipboard(text).then((ok)=>{
+            if (!ok) return;
+            setCopied({
+                path: node.path,
+                kind
+            });
+            if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+            copyTimerRef.current = setTimeout(()=>setCopied(null), 1500);
+            onCopy?.({
+                kind,
+                path: node.path,
+                text
+            });
+        });
+    };
+    const copyPath = (node)=>copy(node, 'path', pathForCopy?.(node.path) ?? node.path);
+    const copyValue = (node)=>copy(node, 'value', valueAsText(node));
+    const toggleWrapped = (node)=>{
+        setWrappedPaths((prev)=>({
+                ...prev,
+                [node.path]: !prev[node.path]
+            }));
+        if (editingPath === node.path) setEditingPath(null);
+    };
+    const commitEdit = (node, value)=>onEdit?.(node, value);
+    const canEdit = !readOnly && !!onEdit;
+    const rows = useMemo(()=>flattenJsonTree(nodes, {
+            collapsed,
+            query,
+            filterPredicate,
+            displayTexts: decorateNode
+        }), [
+        nodes,
+        collapsed,
+        query,
+        filterPredicate,
+        decorateNode
+    ]);
+    const templateItemLabel = strings.arrayItem;
+    const filtering = !!query?.trim() || !!filterPredicate;
+    const resolvedEmptyMessage = filtering ? strings.emptySearch : emptyMessage ?? strings.emptyDefault;
+    const rowContext = {
+        collapsed,
+        onToggleCollapsed,
+        readOnly,
+        decorateNode,
+        deriveTypeIcon,
+        renderValue,
+        nodeActions,
+        maxInlineActions,
+        renderCodeEditor,
+        pathForCopy,
+        canEdit,
+        RowWrapper,
+        templateItemLabel,
+        editingPath,
+        jsonEditingPath,
+        wrappedPaths,
+        copied,
+        setEditingPath,
+        setJsonEditingPath,
+        copyPath,
+        copyValue,
+        toggleWrapped,
+        commitEdit
+    };
+    return /*#__PURE__*/ jsx(JsonTreeTooltipProvider, {
+        children: /*#__PURE__*/ jsx(JsonTreeRowContextProvider, {
+            value: rowContext,
+            children: /*#__PURE__*/ jsxs("div", {
+                ref: setContainer,
+                className: cn(usesAncestorScroller ? 'overflow-x-clip' : 'h-full overflow-y-auto overflow-x-hidden', virtualized && !usesAncestorScroller && 'max-h-screen', virtualized && '[overflow-anchor:none]', className),
+                children: [
+                    virtualized ? /*#__PURE__*/ jsx(VirtualRows, {
+                        rows: rows,
+                        container: container,
+                        scrollElement: scrollElement,
+                        pinnedPaths: pinnedPaths
+                    }) : rows.map(({ node, depth })=>/*#__PURE__*/ jsx(JsonTreeRow, {
+                            node: node,
+                            depth: depth
+                        }, node.path)),
+                    0 === rows.length && /*#__PURE__*/ jsx("span", {
+                        className: "p-4 text-center text-xs text-foreground-subtle",
+                        children: resolvedEmptyMessage
+                    })
+                ]
+            })
+        })
+    });
+}
+export { JsonTreeView };

package/dist/components/ui/json-tree-view/JsonTree.types.cjs

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

package/dist/components/ui/json-tree-view/JsonTree.types.d.ts

@@ -0,0 +1,253 @@
+import type { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+/** Any JSON-serializable value. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | JsonObject;
+/** A JSON object (string keys, JSON values). */
+export interface JsonObject {
+    [key: string]: JsonValue;
+}
+/**
+ * A JSON container: object or array. The value tree renders fields of a
+ * container, so its root value must be one of these (a scalar root has no
+ * fields to show).
+ */
+export type JsonContainer = JsonObject | JsonValue[];
+/** JSON Schema `type` keyword values supported by the value tree. */
+export type JsonSchemaTypeName = 'string' | 'number' | 'integer' | 'boolean' | 'object' | 'array' | 'null';
+/**
+ * The subset of JSON Schema the value tree understands. Unknown keywords are
+ * ignored, so a full draft schema can be passed as-is.
+ */
+export interface JsonSchema {
+    type?: JsonSchemaTypeName | JsonSchemaTypeName[];
+    title?: string;
+    description?: string;
+    /** Semantic format marker (e.g. `file`). Useful for custom value rendering. */
+    format?: string;
+    enum?: Array<string | number | boolean | null>;
+    default?: JsonValue;
+    properties?: Record<string, JsonSchema>;
+    required?: string[];
+    items?: JsonSchema;
+    additionalProperties?: boolean | JsonSchema;
+}
+/** Effective display type of a tree node (JSON value types). */
+export type JsonTreeNodeType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+/** One step into a JSON value: an object key or an array index. */
+export type PathSegment = string | number;
+/** A node of the merged schema + value tree. */
+export interface JsonTreeNode {
+    /** Display key (object key or array index as text). */
+    key: string;
+    /** Expression path, e.g. `httpRequest1.responseBody.items[0].id`. */
+    path: string;
+    /** Path as raw segments, usable with `setValueAtPath`/`getValueAtPath`. */
+    segments: PathSegment[];
+    /** Effective type: from the value when present, else from the schema. */
+    type: JsonTreeNodeType;
+    /**
+     * The value at this node. Undefined when the schema declares this node but
+     * the value does not set it (rendered as "unset").
+     */
+    value?: JsonValue;
+    /** The schema node describing this position, when one exists. */
+    schema?: JsonSchema;
+    /** True when the schema lists this key in the parent's `required`. */
+    required?: boolean;
+    /** Present on object/array nodes (may be empty). */
+    children?: JsonTreeNode[];
+    /**
+     * True when this node belongs to a synthesized, read-only preview of an
+     * array's `items` schema. When an array has no real items, the tree surfaces
+     * the expected item shape by building one preview item from `items`; the flag
+     * is set on that item and every node beneath it. The preview is illustrative,
+     * so these nodes are not editable and the preview item is left out of the
+     * parent array's item count.
+     */
+    isArrayItemTemplate?: boolean;
+}
+/** A consumer-provided row filter, offered in the toolbar's filter dropdown. */
+export interface JsonTreeFilterOption {
+    id: string;
+    /** Label shown in the dropdown and on the trigger when active. */
+    label: string;
+    /**
+     * Rows are kept when the node (or any descendant) matches; a node that
+     * matches directly shows its whole subtree.
+     */
+    predicate: (node: JsonTreeNode) => boolean;
+    /** Optional count shown next to the label. */
+    count?: number;
+}
+/** Visual tone for decoration chips. */
+export type NodeDecorationTone = 'neutral' | 'info' | 'warning' | 'error';
+/**
+ * Derives a custom type-badge icon for a node (e.g. a paperclip for
+ * `format: 'file'` schemas). Return undefined to keep the default type icon.
+ */
+export type DeriveTypeIcon = (node: JsonTreeNode) => ReactNode;
+/** Chip annotation next to a node's key. Provide a label, an icon, or both. */
+export interface NodeDecorationChip {
+    /** Pill text. Omit for a bare icon-only annotation. */
+    label?: string;
+    /** Icon rendered before the label (or alone when there is no label). */
+    icon?: ReactNode;
+    /** Tooltip shown on hover. */
+    tooltip?: string;
+    tone?: NodeDecorationTone;
+}
+/** Overrides for the row's type badge (the leading icon-in-a-box). */
+export interface NodeDecorationBadge {
+    /** Replaces the type icon (wins over `deriveTypeIcon`). */
+    icon?: ReactNode;
+    /**
+     * Color classes for the badge chrome (border/bg/text), replacing the
+     * neutral default, e.g. `'border-info/30 bg-info/10 text-info'`.
+     */
+    className?: string;
+}
+/** Consumer-provided visual annotation for a tree node. */
+export interface NodeDecoration {
+    /**
+     * Display label rendered in place of the raw key. The raw key still drives
+     * paths, copying, and edits; search matches both.
+     */
+    label?: string;
+    /** Small muted text after the key label (e.g. an identifier). */
+    sublabel?: string;
+    /** Replaces the type badge's icon and/or color. */
+    badge?: NodeDecorationBadge;
+    /** Small pill rendered next to the key (e.g. "mocked"). */
+    chip?: NodeDecorationChip;
+    /**
+     * Hides the built-in keys/items count on a container row.
+     */
+    hideCount?: boolean;
+}
+/** Context passed to a custom value cell renderer. */
+export interface RenderValueContext {
+    readOnly: boolean;
+    /** Commits a new value for the node (routed through `onValueChange`). */
+    commit: (value: JsonValue) => void;
+    /**
+     * Removes the value at the node's path (the key is deleted from its parent
+     * container). Routed through `onValueChange` with a `JsonTreeChange` whose
+     * `value` is undefined. Schema-declared nodes render as "unset" afterwards.
+     */
+    clear: () => void;
+}
+/**
+ * Custom value cell renderer. Return a ReactNode to replace the default value
+ * cell for that node (for containers it renders next to the key); return
+ * undefined to keep the default rendering.
+ */
+export type RenderValueCell = (node: JsonTreeNode, ctx: RenderValueContext) => ReactNode;
+/**
+ * A trailing row action rendered in a node's action group (the icon buttons
+ * revealed on row hover). Built-ins use the ids `wrap` | `edit-json` |
+ * `copy-value`; consumer actions supply their own stable id.
+ */
+export interface NodeAction {
+    /** Stable identifier (also the React key). */
+    id: string;
+    /** Icon element (e.g. a lucide icon). The tree sizes it — no explicit size needed. */
+    icon: ReactNode;
+    /** Accessible name (aria-label). Also the hover tooltip unless `tooltip` is set. */
+    label: string;
+    /** Hover tooltip text; defaults to `label`. */
+    tooltip?: string;
+    /** Invoked when the action is triggered, with the row's node. */
+    onSelect: (node: JsonTreeNode) => void;
+    /** Renders in an active/highlighted state (e.g. wrap while a row is wrapped). */
+    active?: boolean;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Color tone; `error` tints a destructive action. Defaults to neutral. */
+    tone?: NodeDecorationTone;
+}
+/** Context passed to `nodeActions`, mirroring the value-cell edit context. */
+export interface NodeActionContext {
+    readOnly: boolean;
+    /**
+     * The actions the tree would render by default for this node (wrap,
+     * edit-as-JSON, copy-value), in display order. Spread these to keep the
+     * built-ins while adding or reordering your own.
+     */
+    defaultActions: NodeAction[];
+    /** Commits a new value for the node (routed through `onEdit`/`onValueChange`). */
+    commit: (value: JsonValue) => void;
+    /** Removes the node's value (the key is deleted from its parent container). */
+    clear: () => void;
+}
+/**
+ * Customizes the trailing row actions per node. Return a new list (typically
+ * composed with `ctx.defaultActions`), an empty array to show no actions for
+ * that node, or `undefined` to keep the defaults. The tree owns the rendering,
+ * the hover reveal, the overflow menu, and a11y.
+ */
+export type NodeActionsResolver = (node: JsonTreeNode, ctx: NodeActionContext) => NodeAction[] | undefined;
+/** Payload for copy events. */
+export interface CopyEvent {
+    /** What was copied: the node's path or its value. */
+    kind: 'path' | 'value';
+    path: string;
+    /** The text placed on the clipboard. */
+    text: string;
+}
+/** Details about a single value edit. */
+export interface JsonTreeChange {
+    path: string;
+    segments: PathSegment[];
+    /** The newly committed value at `path`. Undefined when the value was removed. */
+    value?: JsonValue;
+    /** The previous value at `path` (undefined when it did not exist). */
+    previous?: JsonValue;
+}
+/**
+ * Props passed to a custom row container. The wrapper IS the row element:
+ * render a single container applying `className`/`style` and `children`
+ * verbatim, plus whatever behavior you attach (e.g. dnd-kit drag listeners).
+ */
+export interface JsonTreeRowWrapperProps {
+    node: JsonTreeNode;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * Row click handler (used to expand/collapse containers by clicking the row).
+     * Custom wrappers should forward it to their root element so the behavior
+     * survives; the handler already ignores clicks on interactive descendants.
+     */
+    onClick?: (event: MouseEvent) => void;
+    children: ReactNode;
+}
+/**
+ * Custom row container component (e.g. to make rows drag sources).
+ *
+ * Must be a stable component reference (module scope or memoized), not an
+ * inline arrow: a new identity on each render is a new component type to
+ * React, which remounts every row and drops in-progress editor DOM state.
+ */
+export type JsonTreeRowWrapper = ComponentType<JsonTreeRowWrapperProps>;
+/** Props handed to a consumer-supplied code editor for object/array values. */
+export interface JsonCodeEditorRenderProps {
+    /** Current editor text (controlled). */
+    value: string;
+    /** Called with the new text on every keystroke. */
+    onChange: (value: string) => void;
+    /** Commit the value (bind to Ctrl/Cmd+Enter). */
+    onApply: () => void;
+    /** Discard the edit (bind to Escape). */
+    onCancel: () => void;
+    /** True when `value` does not parse as JSON. */
+    invalid: boolean;
+    /** Editor content language (currently always JSON). */
+    language: 'json';
+    /** Whether the editor should take focus on mount. */
+    autoFocus: boolean;
+}
+/**
+ * Renders the text surface for editing an object/array value as code. Omit to
+ * fall back to a plain textarea. The surrounding chrome — the parse-error
+ * message and the Apply/Cancel actions — is supplied by the tree, so the
+ * editor only needs to render the input and wire the callbacks.
+ */
+export type RenderCodeEditor = (props: JsonCodeEditorRenderProps) => ReactNode;