@uipath/apollo-react 6.59.0 → 6.61.0

package/dist/canvas/components/Guardrails/components/guardrail-field-picker.cjs

@@ -0,0 +1,227 @@
+"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__, {
+    GuardrailFieldPicker: ()=>GuardrailFieldPicker
+});
+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_i18n_cjs_namespaceObject = require("../i18n.cjs");
+const external_rules_utils_cjs_namespaceObject = require("../rules-utils.cjs");
+const filterFields = (value, search, keywords)=>{
+    const needle = search.trim().toLowerCase();
+    return (keywords ?? [
+        value
+    ]).some((keyword)=>keyword.toLowerCase().includes(needle)) ? 1 : 0;
+};
+function triggerText(props) {
+    const { fields, selected, allFields, labels } = props;
+    if (allFields?.selected) return allFields.label;
+    if (0 === selected.length) return labels.selectFields;
+    if (1 === selected.length) return (0, external_rules_utils_cjs_namespaceObject.getGuardrailFieldName)(selected[0], fields);
+    return (0, external_i18n_cjs_namespaceObject.formatGuardrailFormMessage)(labels.fieldsSelected, {
+        count: selected.length
+    });
+}
+function GuardrailFieldPicker({ id, labelId, label, tooltip, fields, selected, onToggle, allFields, chips = false, error, labels }) {
+    const errorId = `${id}-error`;
+    const [open, setOpen] = (0, external_react_namespaceObject.useState)(false);
+    const renderGroup = (source, heading)=>{
+        const stale = selected.filter((field)=>field.source === source && !fields[source].some((offered)=>offered.path === field.path));
+        const options = [
+            ...fields[source],
+            ...stale
+        ];
+        if (0 === options.length) return null;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.CommandGroup, {
+            heading: heading,
+            children: options.map((field)=>{
+                const name = field.title || field.path;
+                const isSelected = (0, external_rules_utils_cjs_namespaceObject.isGuardrailFieldSelected)(selected, field);
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.CommandItem, {
+                    value: `${source}:${field.path}`,
+                    keywords: [
+                        name,
+                        field.path
+                    ],
+                    "aria-checked": isSelected,
+                    onSelect: ()=>onToggle({
+                            ...field,
+                            source
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
+                            className: (0, apollo_wind_namespaceObject.cn)(isSelected ? 'opacity-100' : 'opacity-0'),
+                            "aria-hidden": "true"
+                        }),
+                        name === field.path ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "truncate",
+                            children: name
+                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Tooltip, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.TooltipTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "truncate",
+                                        children: name
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.TooltipContent, {
+                                    side: "right",
+                                    className: "max-w-[300px]",
+                                    children: field.path
+                                })
+                            ]
+                        })
+                    ]
+                }, `${source}:${field.path}`);
+            })
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                id: labelId,
+                htmlFor: id,
+                required: true,
+                tooltip: tooltip,
+                tooltipAriaLabel: labels.moreInformation,
+                children: label
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Popover, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                            id: id,
+                            type: "button",
+                            role: "combobox",
+                            "aria-expanded": open,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": error ? errorId : void 0,
+                            className: "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:text-sm future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "truncate",
+                                    children: triggerText({
+                                        fields,
+                                        selected,
+                                        allFields,
+                                        labels
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                    className: "h-4 w-4 shrink-0 opacity-50",
+                                    "aria-hidden": "true"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.PopoverContent, {
+                        "aria-labelledby": labelId,
+                        className: "min-w-[220px] p-0",
+                        align: "start",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Command, {
+                            filter: filterFields,
+                            label: labels.searchFields,
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.CommandInput, {
+                                    placeholder: labels.searchFields
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.CommandList, {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.CommandEmpty, {
+                                            children: labels.noFieldsFound
+                                        }),
+                                        allFields && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.CommandItem, {
+                                            value: "all",
+                                            keywords: [
+                                                allFields.label
+                                            ],
+                                            "aria-checked": allFields.selected,
+                                            onSelect: allFields.onSelect,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
+                                                    className: (0, apollo_wind_namespaceObject.cn)(allFields.selected ? 'opacity-100' : 'opacity-0'),
+                                                    "aria-hidden": "true"
+                                                }),
+                                                allFields.label
+                                            ]
+                                        }),
+                                        renderGroup('input', labels.inputGroup),
+                                        renderGroup('output', labels.outputGroup)
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            chips && selected.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ul", {
+                className: "flex flex-wrap gap-1",
+                children: selected.map((field)=>{
+                    const name = (0, external_rules_utils_cjs_namespaceObject.getGuardrailFieldName)(field, fields);
+                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", {
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Badge, {
+                            variant: "secondary",
+                            className: "gap-1 pr-1",
+                            title: name === field.path ? void 0 : field.path,
+                            children: [
+                                name,
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                    type: "button",
+                                    "aria-label": (0, external_i18n_cjs_namespaceObject.formatGuardrailFormMessage)(labels.removeField, {
+                                        name
+                                    }),
+                                    className: "rounded-full hover:bg-muted-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                    onClick: ()=>onToggle(field),
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                                        className: "size-3",
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            ]
+                        })
+                    }, `${field.source}:${field.path}`);
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldError, {
+                id: errorId,
+                children: error
+            })
+        ]
+    });
+}
+exports.GuardrailFieldPicker = __webpack_exports__.GuardrailFieldPicker;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GuardrailFieldPicker"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Guardrails/components/guardrail-field-picker.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type GuardrailRulesLabels } from '../i18n';
+import type { GuardrailFieldGroup, GuardrailFieldReference } from '../rules-types';
+export type GuardrailFieldPickerLabels = Pick<GuardrailRulesLabels, 'moreInformation' | 'selectFields' | 'fieldsSelected' | 'searchFields' | 'noFieldsFound' | 'inputGroup' | 'outputGroup' | 'removeField'>;
+export interface GuardrailFieldPickerProps {
+    id: string;
+    labelId: string;
+    label: string;
+    tooltip?: ReactNode;
+    fields: GuardrailFieldGroup;
+    selected: readonly GuardrailFieldReference[];
+    onToggle: (field: GuardrailFieldReference) => void;
+    allFields?: {
+        label: string;
+        selected: boolean;
+        onSelect: () => void;
+    };
+    chips?: boolean;
+    error?: string;
+    labels: GuardrailFieldPickerLabels;
+}
+export declare function GuardrailFieldPicker({ id, labelId, label, tooltip, fields, selected, onToggle, allFields, chips, error, labels, }: GuardrailFieldPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=guardrail-field-picker.d.ts.map

package/dist/canvas/components/Guardrails/components/guardrail-field-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guardrail-field-picker.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Guardrails/components/guardrail-field-picker.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AACjD,OAAO,EAA8B,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EACV,mBAAmB,EACnB,uBAAuB,EAExB,MAAM,gBAAgB,CAAC;AAGxB,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,oBAAoB,EAClB,iBAAiB,GACjB,cAAc,GACd,gBAAgB,GAChB,cAAc,GACd,eAAe,GACf,YAAY,GACZ,aAAa,GACb,aAAa,CAChB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IAExC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,MAAM,EAAE,mBAAmB,CAAC;IAE5B,QAAQ,EAAE,SAAS,uBAAuB,EAAE,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEnD,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAEvE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,0BAA0B,CAAC;CACpC;AAyBD,wBAAgB,oBAAoB,CAAC,EACnC,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAa,EACb,KAAK,EACL,MAAM,GACP,EAAE,yBAAyB,2CA+H3B"}

package/dist/canvas/components/Guardrails/components/guardrail-field-picker.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, FormField, FormFieldError, FormFieldLabel, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipTrigger, cn } from "@uipath/apollo-wind";
+import { Check, ChevronDown, X } from "lucide-react";
+import { useState } from "react";
+import { formatGuardrailFormMessage } from "../i18n.js";
+import { getGuardrailFieldName, isGuardrailFieldSelected } from "../rules-utils.js";
+const filterFields = (value, search, keywords)=>{
+    const needle = search.trim().toLowerCase();
+    return (keywords ?? [
+        value
+    ]).some((keyword)=>keyword.toLowerCase().includes(needle)) ? 1 : 0;
+};
+function triggerText(props) {
+    const { fields, selected, allFields, labels } = props;
+    if (allFields?.selected) return allFields.label;
+    if (0 === selected.length) return labels.selectFields;
+    if (1 === selected.length) return getGuardrailFieldName(selected[0], fields);
+    return formatGuardrailFormMessage(labels.fieldsSelected, {
+        count: selected.length
+    });
+}
+function GuardrailFieldPicker({ id, labelId, label, tooltip, fields, selected, onToggle, allFields, chips = false, error, labels }) {
+    const errorId = `${id}-error`;
+    const [open, setOpen] = useState(false);
+    const renderGroup = (source, heading)=>{
+        const stale = selected.filter((field)=>field.source === source && !fields[source].some((offered)=>offered.path === field.path));
+        const options = [
+            ...fields[source],
+            ...stale
+        ];
+        if (0 === options.length) return null;
+        return /*#__PURE__*/ jsx(CommandGroup, {
+            heading: heading,
+            children: options.map((field)=>{
+                const name = field.title || field.path;
+                const isSelected = isGuardrailFieldSelected(selected, field);
+                return /*#__PURE__*/ jsxs(CommandItem, {
+                    value: `${source}:${field.path}`,
+                    keywords: [
+                        name,
+                        field.path
+                    ],
+                    "aria-checked": isSelected,
+                    onSelect: ()=>onToggle({
+                            ...field,
+                            source
+                        }),
+                    children: [
+                        /*#__PURE__*/ jsx(Check, {
+                            className: cn(isSelected ? 'opacity-100' : 'opacity-0'),
+                            "aria-hidden": "true"
+                        }),
+                        name === field.path ? /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: name
+                        }) : /*#__PURE__*/ jsxs(Tooltip, {
+                            children: [
+                                /*#__PURE__*/ jsx(TooltipTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "truncate",
+                                        children: name
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(TooltipContent, {
+                                    side: "right",
+                                    className: "max-w-[300px]",
+                                    children: field.path
+                                })
+                            ]
+                        })
+                    ]
+                }, `${source}:${field.path}`);
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxs(FormField, {
+        children: [
+            /*#__PURE__*/ jsx(FormFieldLabel, {
+                id: labelId,
+                htmlFor: id,
+                required: true,
+                tooltip: tooltip,
+                tooltipAriaLabel: labels.moreInformation,
+                children: label
+            }),
+            /*#__PURE__*/ jsxs(Popover, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsxs("button", {
+                            id: id,
+                            type: "button",
+                            role: "combobox",
+                            "aria-expanded": open,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": error ? errorId : void 0,
+                            className: "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:text-sm future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal aria-invalid:border-error aria-invalid:focus-visible:ring-error future:aria-invalid:ring-1 future:aria-invalid:ring-error/40",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "truncate",
+                                    children: triggerText({
+                                        fields,
+                                        selected,
+                                        allFields,
+                                        labels
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(ChevronDown, {
+                                    className: "h-4 w-4 shrink-0 opacity-50",
+                                    "aria-hidden": "true"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(PopoverContent, {
+                        "aria-labelledby": labelId,
+                        className: "min-w-[220px] p-0",
+                        align: "start",
+                        children: /*#__PURE__*/ jsxs(Command, {
+                            filter: filterFields,
+                            label: labels.searchFields,
+                            children: [
+                                /*#__PURE__*/ jsx(CommandInput, {
+                                    placeholder: labels.searchFields
+                                }),
+                                /*#__PURE__*/ jsxs(CommandList, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(CommandEmpty, {
+                                            children: labels.noFieldsFound
+                                        }),
+                                        allFields && /*#__PURE__*/ jsxs(CommandItem, {
+                                            value: "all",
+                                            keywords: [
+                                                allFields.label
+                                            ],
+                                            "aria-checked": allFields.selected,
+                                            onSelect: allFields.onSelect,
+                                            children: [
+                                                /*#__PURE__*/ jsx(Check, {
+                                                    className: cn(allFields.selected ? 'opacity-100' : 'opacity-0'),
+                                                    "aria-hidden": "true"
+                                                }),
+                                                allFields.label
+                                            ]
+                                        }),
+                                        renderGroup('input', labels.inputGroup),
+                                        renderGroup('output', labels.outputGroup)
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            chips && selected.length > 0 && /*#__PURE__*/ jsx("ul", {
+                className: "flex flex-wrap gap-1",
+                children: selected.map((field)=>{
+                    const name = getGuardrailFieldName(field, fields);
+                    return /*#__PURE__*/ jsx("li", {
+                        children: /*#__PURE__*/ jsxs(Badge, {
+                            variant: "secondary",
+                            className: "gap-1 pr-1",
+                            title: name === field.path ? void 0 : field.path,
+                            children: [
+                                name,
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "aria-label": formatGuardrailFormMessage(labels.removeField, {
+                                        name
+                                    }),
+                                    className: "rounded-full hover:bg-muted-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                    onClick: ()=>onToggle(field),
+                                    children: /*#__PURE__*/ jsx(X, {
+                                        className: "size-3",
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            ]
+                        })
+                    }, `${field.source}:${field.path}`);
+                })
+            }),
+            /*#__PURE__*/ jsx(FormFieldError, {
+                id: errorId,
+                children: error
+            })
+        ]
+    });
+}
+export { GuardrailFieldPicker };