@uipath/apollo-wind 2.54.1 → 2.56.0

package/dist/components/ui/model-picker/ModelPicker.cjs

@@ -0,0 +1,495 @@
+"use strict";
+"use client";
+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__, {
+    ModelPicker: ()=>ModelPicker_ModelPicker
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const external_alert_dialog_cjs_namespaceObject = require("../alert-dialog.cjs");
+const external_form_field_cjs_namespaceObject = require("../form-field.cjs");
+const external_popover_cjs_namespaceObject = require("../popover.cjs");
+const external_spinner_cjs_namespaceObject = require("../spinner.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const external_labels_cjs_namespaceObject = require("./labels.cjs");
+const FolderSwitcher_cjs_namespaceObject = require("./primitives/FolderSwitcher.cjs");
+const ModelOptionRow_cjs_namespaceObject = require("./primitives/ModelOptionRow.cjs");
+const OptionList_cjs_namespaceObject = require("./primitives/OptionList.cjs");
+const PickerPopup_cjs_namespaceObject = require("./primitives/PickerPopup.cjs");
+const PickerSearchInput_cjs_namespaceObject = require("./primitives/PickerSearchInput.cjs");
+const PickerTrigger_cjs_namespaceObject = require("./primitives/PickerTrigger.cjs");
+const external_useModelPickerState_cjs_namespaceObject = require("./useModelPickerState.cjs");
+const external_utils_cjs_namespaceObject = require("./utils.cjs");
+const AUTO_VIRTUALIZE_THRESHOLD = 120;
+const ModelPicker_ModelPicker = /*#__PURE__*/ external_react_default().forwardRef(function({ models, value, valueConnectionId, onChange, label, ariaLabel, required, placeholder, disabled, invalid, errorText, variant = 'searchable', groupBy = "subscription", allowGroupingChange = true, homeRegion, recommendedModelIds, previewModelIds, filter, badgesFor, customTagsFor, customTagVariants, canManageByo, onUseCustomModel, folders, folder: folderProp, onFolderChange, allFoldersLabel, loading, error, showGroupHeaders = true, popupContainer, onDeleteModel, onEditModel, labels: labelOverrides, slots, testId }, forwardedRef) {
+    const labels = external_react_default().useMemo(()=>(0, external_labels_cjs_namespaceObject.resolveLabels)(labelOverrides), [
+        labelOverrides
+    ]);
+    const defaultLabel = labels.fieldLabel;
+    const resolvedLabel = label ?? defaultLabel;
+    const labelHidden = null === label;
+    const resolvedPlaceholder = placeholder ?? labels.placeholder;
+    const initiallyCollapsedGroups = external_react_default().useMemo(()=>[], []);
+    const [internalFolder, setInternalFolder] = external_react_default().useState(null);
+    const folderIsControlled = void 0 !== folderProp;
+    const folder = folderIsControlled ? folderProp : internalFolder;
+    const handleFolderChange = external_react_default().useCallback((next)=>{
+        if (!folderIsControlled) setInternalFolder(next);
+        onFolderChange?.(next);
+    }, [
+        folderIsControlled,
+        onFolderChange
+    ]);
+    const catalog = models;
+    const effectiveLoading = loading ?? false;
+    const [pendingDelete, setPendingDelete] = external_react_default().useState(null);
+    const [deleteError, setDeleteError] = external_react_default().useState(null);
+    const pendingDeleteRef = external_react_default().useRef(null);
+    pendingDeleteRef.current = pendingDelete;
+    const deleteInFlight = external_react_default().useRef(false);
+    const handleDeleteModel = external_react_default().useMemo(()=>{
+        if (!onDeleteModel) return;
+        return (m)=>{
+            if (deleteInFlight.current) return;
+            setDeleteError(null);
+            setPendingDelete(m);
+        };
+    }, [
+        onDeleteModel
+    ]);
+    const confirmPendingDelete = external_react_default().useCallback(async ()=>{
+        const model = pendingDelete;
+        setPendingDelete(null);
+        if (!model || !onDeleteModel || deleteInFlight.current) return;
+        deleteInFlight.current = true;
+        try {
+            await onDeleteModel(model);
+        } catch (err) {
+            setDeleteError(err instanceof Error ? err : new Error(String(err)));
+        } finally{
+            deleteInFlight.current = false;
+        }
+    }, [
+        pendingDelete,
+        onDeleteModel
+    ]);
+    const effectiveError = error ?? null;
+    const effectiveModels = external_react_default().useMemo(()=>catalog.filter((m)=>!m.isBlockedByPolicy), [
+        catalog
+    ]);
+    const state = (0, external_useModelPickerState_cjs_namespaceObject.useModelPickerState)({
+        models: effectiveModels,
+        value,
+        valueConnectionId,
+        onChange,
+        groupBy,
+        recommendedModelIds,
+        previewModelIds,
+        filter,
+        initiallyCollapsedGroups,
+        collapsibleGroups: showGroupHeaders,
+        labels
+    });
+    const { open, setOpen, query, setQuery, groupBy: activeGroupBy, setGroupBy, filtered, groupCounts, collapsedGroups, toggleGroup, selected, unknownValue, activeIndex, setActiveIndex, onSearchKeyDown, choose, id, triggerRef, searchRef, activeVisible } = state;
+    const listboxId = `${id}-listbox`;
+    const List = 'virtualized' === variant || filtered.length > AUTO_VIRTUALIZE_THRESHOLD ? OptionList_cjs_namespaceObject.VirtualOptionList : OptionList_cjs_namespaceObject.GroupedOptionList;
+    const handleTriggerRef = external_react_default().useCallback((node)=>{
+        triggerRef.current = node;
+        if ('function' == typeof forwardedRef) forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+    }, [
+        forwardedRef,
+        triggerRef
+    ]);
+    const closePopup = external_react_default().useCallback(()=>{
+        setOpen(false);
+        setDeleteError(null);
+    }, [
+        setOpen
+    ]);
+    const handleOpenChange = external_react_default().useCallback((next)=>{
+        if (next) return void setOpen(true);
+        if (pendingDeleteRef.current) return;
+        closePopup();
+    }, [
+        setOpen,
+        closePopup
+    ]);
+    const slotCtx = external_react_default().useMemo(()=>({
+            selected,
+            close: closePopup
+        }), [
+        selected,
+        closePopup
+    ]);
+    const effectiveCanManageByo = canManageByo ?? false;
+    const effectiveFolders = folders;
+    const listReady = !effectiveLoading && !effectiveError;
+    const handleSearchKeyDown = external_react_default().useCallback((e)=>{
+        if (!listReady) {
+            if ('Escape' === e.key) onSearchKeyDown(e);
+            else if ('Enter' === e.key || e.key.startsWith('Arrow')) e.preventDefault();
+            return;
+        }
+        const active = filtered[activeIndex];
+        if (active && activeVisible && effectiveCanManageByo && (0, external_utils_cjs_namespaceObject.isByoModel)(active)) {
+            if ('Enter' === e.key && e.shiftKey && onEditModel) {
+                e.preventDefault();
+                onEditModel(active);
+                return;
+            }
+            const field = e.currentTarget;
+            const nothingToDelete = field.selectionStart === field.value.length && field.selectionEnd === field.selectionStart;
+            if ('Delete' === e.key && nothingToDelete && handleDeleteModel) {
+                e.preventDefault();
+                handleDeleteModel(active);
+                return;
+            }
+        }
+        onSearchKeyDown(e);
+    }, [
+        listReady,
+        filtered,
+        activeIndex,
+        activeVisible,
+        effectiveCanManageByo,
+        onEditModel,
+        handleDeleteModel,
+        onSearchKeyDown
+    ]);
+    external_react_default().useEffect(()=>{
+        if ("u" < typeof process || 'production' === process.env.NODE_ENV || !effectiveFolders) return;
+        const seen = new Set();
+        for (const f of effectiveFolders){
+            if (seen.has(f.id)) return void console.warn(`[ModelPicker] Duplicate folder id "${f.id}" — folder selection will misbehave.`);
+            seen.add(f.id);
+        }
+    }, [
+        effectiveFolders
+    ]);
+    const homeGeography = (0, external_utils_cjs_namespaceObject.resolveHomeGeography)(homeRegion);
+    const tagContext = external_react_default().useMemo(()=>({
+            labels,
+            homeRegion: homeGeography,
+            recommendedModelIds,
+            previewModelIds,
+            badgesFor,
+            customTagsFor
+        }), [
+        labels,
+        homeGeography,
+        recommendedModelIds,
+        previewModelIds,
+        badgesFor,
+        customTagsFor
+    ]);
+    const renderRowActions = external_react_default().useMemo(()=>{
+        if (slots?.optionActions) return slots.optionActions;
+        if (!effectiveCanManageByo) return ()=>null;
+        if (!onEditModel && !handleDeleteModel) return ()=>null;
+        return (m)=>(0, ModelOptionRow_cjs_namespaceObject.defaultRowActions)(m, {
+                labels,
+                onEdit: onEditModel,
+                onDelete: handleDeleteModel
+            });
+    }, [
+        slots?.optionActions,
+        effectiveCanManageByo,
+        onEditModel,
+        handleDeleteModel,
+        labels
+    ]);
+    const footerNode = external_react_default().useMemo(()=>{
+        if (slots && 'popupFooter' in slots) return slots.popupFooter ? slots.popupFooter(slotCtx) : null;
+        if (!effectiveCanManageByo) return null;
+        const activate = onUseCustomModel;
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(UseCustomModelFooter, {
+            disabled: !activate,
+            labels: labels,
+            onActivate: ()=>{
+                activate?.();
+                closePopup();
+            }
+        });
+    }, [
+        slots,
+        effectiveCanManageByo,
+        onUseCustomModel,
+        slotCtx,
+        closePopup,
+        labels
+    ]);
+    const pendingValue = effectiveLoading && !selected && value ? value : null;
+    const errorMessage = errorText ?? effectiveError?.message;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_form_field_cjs_namespaceObject.FormField, {
+        className: "w-full",
+        "data-slot": "model-picker",
+        "data-testid": testId,
+        children: [
+            !labelHidden && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldLabel, {
+                htmlFor: `${id}-trigger`,
+                required: required,
+                children: resolvedLabel
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                onOpenChange: handleOpenChange,
+                open: open,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PickerTrigger_cjs_namespaceObject.PickerTrigger, {
+                            controlsId: listboxId,
+                            describedById: errorMessage ? `${id}-error` : void 0,
+                            disabled: disabled,
+                            extra: slots?.triggerExtra?.(selected),
+                            "aria-label": labelHidden ? ariaLabel ?? defaultLabel : void 0,
+                            id: `${id}-trigger`,
+                            invalid: !!invalid || !!effectiveError || !!unknownValue,
+                            open: open,
+                            pendingValue: pendingValue,
+                            placeholder: resolvedPlaceholder,
+                            ref: handleTriggerRef,
+                            required: required,
+                            selected: selected,
+                            tagContext: tagContext,
+                            tagVariants: customTagVariants,
+                            unknownValue: unknownValue
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(PickerPopup_cjs_namespaceObject.PickerPopup, {
+                        container: popupContainer,
+                        footer: footerNode,
+                        header: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                slots?.popupHeader?.(),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PickerSearchInput_cjs_namespaceObject.PickerSearchInput, {
+                                    activeDescendantId: listReady && activeVisible && filtered[activeIndex] ? (0, OptionList_cjs_namespaceObject.optionDomId)(listboxId, filtered[activeIndex].modelId) : void 0,
+                                    inputRef: searchRef,
+                                    leading: slots?.searchLeading?.() ?? (effectiveFolders && effectiveFolders.length > 0 ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FolderSwitcher_cjs_namespaceObject.FolderSwitcher, {
+                                        allFoldersLabel: allFoldersLabel ?? labels.allFolders,
+                                        container: popupContainer,
+                                        folders: effectiveFolders,
+                                        onChange: handleFolderChange,
+                                        value: folder ?? null
+                                    }) : void 0),
+                                    listboxId: listboxId,
+                                    onChange: (next)=>{
+                                        setQuery(next);
+                                        setActiveIndex(0);
+                                    },
+                                    onKeyDown: handleSearchKeyDown,
+                                    placeholder: labels.searchPlaceholder,
+                                    trailing: allowGroupingChange ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(GroupBySegmented, {
+                                        labels: labels,
+                                        onChange: setGroupBy,
+                                        value: activeGroupBy
+                                    }) : void 0,
+                                    value: query
+                                })
+                            ]
+                        }),
+                        onOpenAutoFocus: (e)=>{
+                            e.preventDefault();
+                            searchRef.current?.focus();
+                        },
+                        children: [
+                            effectiveLoading && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                "aria-label": labels.loading,
+                                "aria-live": "polite",
+                                className: "flex justify-center py-6 text-foreground-muted",
+                                role: "status",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_spinner_cjs_namespaceObject.Spinner, {
+                                    size: "sm"
+                                })
+                            }),
+                            effectiveError && !effectiveLoading && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "px-4 py-4 text-center text-sm text-error",
+                                role: "alert",
+                                children: effectiveError.message
+                            }),
+                            deleteError && !effectiveError && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "border-b border-border px-4 py-2 text-sm text-error",
+                                role: "alert",
+                                children: deleteError.message
+                            }),
+                            !effectiveLoading && !effectiveError && 0 === filtered.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                "aria-live": "polite",
+                                className: "py-6 text-center text-sm text-foreground-muted",
+                                role: "status",
+                                children: query.trim() ? labels.emptyNoMatch(query.trim()) : labels.emptyNoModels
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                "aria-atomic": "true",
+                                "aria-live": "polite",
+                                className: "sr-only",
+                                children: effectiveLoading || effectiveError || !(filtered.length > 0) ? '' : 1 === filtered.length ? labels.resultCount(filtered.length) : labels.resultCount(filtered.length)
+                            }),
+                            !effectiveLoading && !effectiveError && filtered.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(List, {
+                                        activeIndex: activeIndex,
+                                        "aria-label": labels.listboxLabel,
+                                        collapsedGroups: collapsedGroups,
+                                        groupCounts: groupCounts,
+                                        hideGroupHeaders: !showGroupHeaders || 'flat' === activeGroupBy,
+                                        id: listboxId,
+                                        onGroupToggle: toggleGroup,
+                                        onSelect: choose,
+                                        options: filtered,
+                                        renderRowActions: renderRowActions,
+                                        renderRowMeta: slots?.optionMeta,
+                                        selectedId: selected?.modelId ?? value ?? null,
+                                        setActiveIndex: setActiveIndex,
+                                        tagContext: tagContext,
+                                        tagVariants: customTagVariants
+                                    }),
+                                    slots?.listFooter?.(slotCtx)
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            errorMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                id: `${id}-error`,
+                role: "alert",
+                children: errorMessage
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_alert_dialog_cjs_namespaceObject.AlertDialog, {
+                onOpenChange: (next)=>!next && setPendingDelete(null),
+                open: null !== pendingDelete,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_alert_dialog_cjs_namespaceObject.AlertDialogContent, {
+                    container: popupContainer,
+                    onCloseAutoFocus: (e)=>{
+                        e.preventDefault();
+                        searchRef.current?.focus();
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_alert_dialog_cjs_namespaceObject.AlertDialogHeader, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_alert_dialog_cjs_namespaceObject.AlertDialogTitle, {
+                                    children: labels.deleteConfirmTitle
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_alert_dialog_cjs_namespaceObject.AlertDialogDescription, {
+                                    children: labels.deleteConfirmMessage(pendingDelete ? pendingDelete.displayName ?? pendingDelete.modelName : '')
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_alert_dialog_cjs_namespaceObject.AlertDialogFooter, {
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_alert_dialog_cjs_namespaceObject.AlertDialogCancel, {
+                                    autoFocus: true,
+                                    children: labels.deleteConfirmCancel
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_alert_dialog_cjs_namespaceObject.AlertDialogAction, {
+                                    className: "bg-error-background text-error hover:bg-error-background/80",
+                                    onClick: confirmPendingDelete,
+                                    children: labels.deleteConfirmConfirm
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+});
+ModelPicker_ModelPicker.displayName = 'ModelPicker';
+const GroupBySegmented = ({ value, onChange, labels })=>{
+    const groupByOptions = [
+        {
+            key: "subscription",
+            label: labels.groupByCategory
+        },
+        {
+            key: 'vendor',
+            label: labels.groupByProvider
+        }
+    ];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        "aria-label": labels.groupByAriaLabel,
+        className: "inline-flex gap-[3px] rounded-lg bg-surface-raised p-[3px]",
+        "data-slot": "model-picker-group-by",
+        role: "group",
+        children: groupByOptions.map((opt)=>{
+            const active = opt.key === value;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                "aria-pressed": active,
+                className: (0, index_cjs_namespaceObject.cn)('cursor-pointer rounded-md px-2.5 py-1.5 text-xs leading-tight font-semibold transition-colors', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', active ? 'bg-popover text-brand shadow-sm' : 'text-foreground-muted hover:bg-surface-hover'),
+                onClick: ()=>onChange(opt.key),
+                type: "button",
+                children: opt.label
+            }, opt.key);
+        })
+    });
+};
+const UseCustomModelFooter = ({ onActivate, disabled, labels })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+        className: (0, index_cjs_namespaceObject.cn)('flex w-full cursor-pointer items-center justify-start gap-3 px-4 py-3 text-left text-brand transition-colors', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset', 'disabled:cursor-default', disabled ? 'opacity-55' : 'hover:bg-surface-hover'),
+        "data-slot": "model-picker-use-custom-model",
+        disabled: disabled,
+        onClick: disabled ? void 0 : onActivate,
+        title: disabled ? labels.useCustomModelDisabledHint : void 0,
+        type: "button",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "flex size-[30px] shrink-0 items-center justify-center rounded-lg bg-brand/10 text-brand",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                    className: "size-[18px]"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                className: "flex min-w-0 flex-col",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-sm leading-snug font-semibold",
+                        children: labels.useCustomModelTitle
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-xs leading-snug font-normal text-foreground-muted",
+                        children: labels.useCustomModelSubtitle
+                    })
+                ]
+            })
+        ]
+    });
+exports.ModelPicker = __webpack_exports__.ModelPicker;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ModelPicker"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});