@uipath/apollo-wind 2.60.0 → 2.61.0

package/dist/components/forms/mode-aware-field.cjs

@@ -0,0 +1,589 @@
+"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__, {
+    ModeAwareField: ()=>ModeAwareField
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_react_hook_form_namespaceObject = require("react-hook-form");
+const badge_cjs_namespaceObject = require("../ui/badge.cjs");
+const field_menu_cjs_namespaceObject = require("../ui/field-addons/field-menu.cjs");
+const value_mode_indicator_cjs_namespaceObject = require("../ui/field-addons/value-mode-indicator.cjs");
+const value_mode_switch_dialog_cjs_namespaceObject = require("../ui/field-addons/value-mode-switch-dialog.cjs");
+const form_field_cjs_namespaceObject = require("../ui/form-field.cjs");
+const input_cjs_namespaceObject = require("../ui/input.cjs");
+const input_group_cjs_namespaceObject = require("../ui/input-group.cjs");
+const prompt_value_control_cjs_namespaceObject = require("../ui/prompt-value-control.cjs");
+const variable_value_control_cjs_namespaceObject = require("../ui/variable-value-control.cjs");
+const external_field_actions_cjs_namespaceObject = require("./field-actions.cjs");
+const external_field_control_cjs_namespaceObject = require("./field-control.cjs");
+const external_form_strings_cjs_namespaceObject = require("./form-strings.cjs");
+const external_validation_converter_cjs_namespaceObject = require("./validation-converter.cjs");
+const external_value_modes_cjs_namespaceObject = require("./value-modes.cjs");
+function ModeAwareField(props) {
+    const { control } = (0, external_react_hook_form_namespaceObject.useFormContext)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
+        name: props.field.name,
+        control: control,
+        defaultValue: props.field.defaultValue,
+        render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FieldAnatomy, {
+                ...props,
+                formField: formField,
+                error: error?.message
+            })
+    });
+}
+const BUILT_IN_MODE_CONTROLS = {
+    variable: {
+        component: variable_value_control_cjs_namespaceObject.VariableValueControl
+    },
+    prompt: {
+        component: prompt_value_control_cjs_namespaceObject.PromptValueControl,
+        layout: 'grow',
+        variant: 'agent',
+        insertable: true
+    }
+};
+function unfittedGeometry(field) {
+    const labelledBy = [
+        'radio',
+        'slider',
+        'datetime',
+        'string-list'
+    ].includes(field.type);
+    return {
+        layout: 'row',
+        variant: 'outline',
+        labelTarget: labelledBy ? 'labelledby' : 'control',
+        insertable: false
+    };
+}
+function registrationGeometry(registration) {
+    return {
+        layout: registration.layout ?? 'row',
+        variant: registration.variant ?? 'default',
+        labelTarget: registration.labelTarget ?? 'control',
+        insertable: registration.insertable ?? false
+    };
+}
+const TEXT_GEOMETRY = {
+    layout: 'row',
+    variant: 'default',
+    labelTarget: 'control',
+    insertable: true
+};
+function FieldAnatomy({ field, context, customComponents, disabled, required, options, formField, error }) {
+    const form = (0, external_react_hook_form_namespaceObject.useFormContext)();
+    const registry = context.valueModes ?? external_value_modes_cjs_namespaceObject.DEFAULT_VALUE_MODE_REGISTRY;
+    const actionRegistry = context.fieldActions ?? external_field_actions_cjs_namespaceObject.DEFAULT_FIELD_ACTION_REGISTRY;
+    const strings = context.strings ?? external_form_strings_cjs_namespaceObject.DEFAULT_METADATA_FORM_STRINGS;
+    const config = field.valueModes;
+    const { name } = field;
+    const errorId = `${name}-error`;
+    const labelId = `${name}-label`;
+    const formVariables = context.variables;
+    const variables = (0, external_react_namespaceObject.useCallback)(()=>(0, external_field_actions_cjs_namespaceObject.resolveVariables)(formVariables, field), [
+        formVariables,
+        field
+    ]);
+    const { value } = formField;
+    const codec = config ? (0, external_value_modes_cjs_namespaceObject.resolveCodec)(registry.codecs, config) : void 0;
+    const codecCtx = (0, external_react_namespaceObject.useMemo)(()=>config && (0, external_value_modes_cjs_namespaceObject.codecContext)(field, config), [
+        field,
+        config
+    ]);
+    const decoded = codec && codecCtx ? codec.decode(value, codecCtx) : void 0;
+    const empty = codec && codecCtx && decoded ? (0, external_value_modes_cjs_namespaceObject.isDecodedEmpty)(codec, decoded, codecCtx) : (0, external_validation_converter_cjs_namespaceObject.isEmptyFieldValue)(value);
+    const [held, setHeld] = (0, external_react_namespaceObject.useState)();
+    const heldMode = held && empty && Object.is(held.stored, value) ? held.mode : void 0;
+    const activeMode = config && decoded ? activeModeOf(config, decoded.mode, empty && (0, external_validation_converter_cjs_namespaceObject.isEmptyFieldValue)(value), heldMode) : 'literal';
+    const inner = decoded ? decoded.mode === activeMode ? decoded.value : void 0 : value;
+    const [pending, setPending] = (0, external_react_namespaceObject.useState)();
+    const groupRef = (0, external_react_namespaceObject.useRef)(null);
+    const controlRef = (0, external_react_namespaceObject.useRef)(null);
+    const latest = (0, external_react_namespaceObject.useRef)({
+        value,
+        inner,
+        empty,
+        activeMode,
+        decoded,
+        disabled,
+        formField,
+        insertable: false
+    });
+    latest.current = {
+        ...latest.current,
+        value,
+        inner,
+        empty,
+        activeMode,
+        decoded,
+        disabled,
+        formField
+    };
+    const encode = (mode, value)=>codec && codecCtx ? codec.encode(mode, value, codecCtx, latest.current.value) : value;
+    const write = (next, via)=>{
+        if ('change' === via) latest.current.formField.onChange(next);
+        else {
+            const liveMode = 'onChange' === context.schema.mode || 'all' === context.schema.mode;
+            form.setValue(name, next, {
+                shouldDirty: true,
+                shouldValidate: liveMode || form.formState.isSubmitted
+            });
+        }
+        return next;
+    };
+    const commit = (mode, value, via)=>{
+        const stored = write(value, via);
+        if (codec && codecCtx) {
+            const written = codec.decode(stored, codecCtx);
+            setHeld((0, external_value_modes_cjs_namespaceObject.isDecodedEmpty)(codec, written, codecCtx) ? {
+                mode,
+                stored
+            } : void 0);
+        }
+    };
+    const writeInner = (next, via = 'change')=>{
+        const mode = latest.current.activeMode;
+        if (config) commit(mode, encode(mode, next), via);
+        else write(next, via);
+    };
+    const setModeValue = (mode, value, options)=>{
+        if (options?.confirm && !latest.current.empty) setPending({
+            ...options.confirm,
+            to: mode,
+            value
+        });
+        else commit(mode, encode(mode, value), 'set');
+    };
+    const handleSelect = (to)=>{
+        const current = latest.current;
+        if (!codec || !codecCtx || !current.decoded || to === current.activeMode) return;
+        const result = (0, external_value_modes_cjs_namespaceObject.convertValue)(codec, {
+            ...current.decoded,
+            mode: current.activeMode
+        }, to, codecCtx);
+        if ('ok' === result.kind) commit(to, encode(to, result.value), 'set');
+        else setPending({
+            to,
+            value: result.value,
+            title: result.title,
+            description: result.description
+        });
+    };
+    const writeInnerRef = (0, external_react_namespaceObject.useRef)(writeInner);
+    writeInnerRef.current = writeInner;
+    const domHandle = (0, external_react_namespaceObject.useMemo)(()=>({
+            focus: ()=>controlElement(groupRef.current, name)?.focus(),
+            insertText: (text)=>{
+                const element = controlElement(groupRef.current, name);
+                if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
+                    const current = latest.current.inner;
+                    writeInnerRef.current(`${'string' == typeof current ? current : ''}${text}`, 'set');
+                    return;
+                }
+                const selectable = null !== element.selectionStart;
+                const start = element.selectionStart ?? element.value.length;
+                const end = element.selectionEnd ?? start;
+                writeInnerRef.current(element.value.slice(0, start) + text + element.value.slice(end), 'set');
+                const caret = start + text.length;
+                setTimeout(()=>{
+                    element.focus();
+                    if (selectable) element.setSelectionRange(caret, caret);
+                });
+            }
+        }), [
+        name
+    ]);
+    const ctx = useActionContext({
+        field,
+        name,
+        form,
+        modeAware: !!config,
+        latest,
+        strings,
+        variables,
+        control: ()=>{
+            const own = controlRef.current;
+            if (!own) return domHandle;
+            return own.insertText ? own : {
+                ...own,
+                insertText: domHandle.insertText
+            };
+        },
+        commit,
+        write,
+        encode,
+        setModeValue,
+        codec,
+        codecCtx
+    });
+    const binding = {
+        value: controlValue(field, inner),
+        onChange: (next)=>writeInner(next),
+        onBlur: formField.onBlur,
+        name: formField.name,
+        ref: formField.ref
+    };
+    const resolved = resolveControl({
+        field,
+        config,
+        mode: activeMode,
+        registry,
+        strings,
+        customComponents,
+        binding,
+        controlRef,
+        labelId,
+        options,
+        disabled,
+        required,
+        error,
+        errorId,
+        valueModeProps: ()=>({
+                value: inner,
+                onChange: (next)=>writeInner(next),
+                onBlur: formField.onBlur,
+                name,
+                field,
+                disabled,
+                required,
+                error,
+                mode: activeMode,
+                onModeValueChange: setModeValue,
+                requestModeSwitch: handleSelect,
+                controlRef,
+                inputRef: formField.ref,
+                id: name,
+                labelId,
+                invalid: !!error,
+                placeholder: field.placeholder,
+                variables,
+                strings: strings.valueModes,
+                controlProps: {
+                    'data-slot': 'input-group-control',
+                    'aria-invalid': error ? true : void 0,
+                    'aria-describedby': error ? errorId : void 0,
+                    'aria-errormessage': error ? errorId : void 0
+                }
+            })
+    });
+    latest.current.insertable = resolved.geometry.insertable;
+    const { header, menu } = (0, external_field_actions_cjs_namespaceObject.resolveFieldActions)(field, actionRegistry);
+    const modeOptions = config ? (0, external_value_modes_cjs_namespaceObject.resolveModeOptions)(field, config, registry, strings.valueModes) : [];
+    const switchable = !!config && (config.switchable ?? config.modes.length > 1);
+    const menuItems = menu.map((action)=>({
+            id: action.id,
+            label: 'function' == typeof action.label ? action.label(ctx) : action.label,
+            icon: action.icon,
+            destructive: action.destructive,
+            disabled: action.disabled?.(ctx) ?? false,
+            onSelect: ()=>action.onSelect(ctx)
+        }));
+    const indicator = config && false !== config.indicator && 'literal' !== activeMode ? registry.definitions[activeMode]?.indicator ?? ('expression' === activeMode ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(value_mode_indicator_cjs_namespaceObject.ValueModeIndicator, {
+        mode: "expression",
+        disabled: disabled,
+        strings: strings.valueModes
+    }) : null) : null;
+    const headerActions = header.map((action)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {
+            children: action.render(ctx)
+        }, action.id));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldHeader, {
+                label: field.label,
+                labelId: labelId,
+                htmlFor: 'control' === resolved.geometry.labelTarget ? name : void 0,
+                required: required,
+                tooltip: field.tooltip,
+                tooltipAriaLabel: field.tooltipAriaLabel,
+                badge: field.badge ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(badge_cjs_namespaceObject.Badge, {
+                    variant: "secondary",
+                    children: field.badge
+                }) : void 0,
+                actions: headerActions.length > 0 ? headerActions : void 0
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(input_group_cjs_namespaceObject.InputGroup, {
+                ref: groupRef,
+                layout: resolved.geometry.layout,
+                variant: resolved.geometry.variant,
+                disabled: disabled,
+                error: error,
+                errorId: errorId,
+                "data-value-mode-control": 'production' === process.env.NODE_ENV ? void 0 : resolved.source,
+                children: [
+                    indicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_group_cjs_namespaceObject.InputGroupAddon, {
+                        align: "inline-start",
+                        children: indicator
+                    }),
+                    resolved.node,
+                    (switchable || menuItems.length > 0) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_group_cjs_namespaceObject.InputGroupAddon, {
+                        align: "inline-end",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_menu_cjs_namespaceObject.FieldMenu, {
+                            mode: activeMode,
+                            onSelect: handleSelect,
+                            modes: modeOptions,
+                            actions: menuItems,
+                            modesDisabled: !switchable,
+                            disabled: disabled,
+                            strings: strings.valueModes
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
+                children: field.description
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(value_mode_switch_dialog_cjs_namespaceObject.ValueModeSwitchDialog, {
+                open: !!pending,
+                title: pending?.title,
+                description: pending?.description,
+                confirmLabel: pending?.confirmLabel,
+                strings: strings.valueModes,
+                onCancel: ()=>setPending(void 0),
+                onConfirm: ()=>{
+                    if (pending && !latest.current.disabled) commit(pending.to, encode(pending.to, pending.value), 'set');
+                    setPending(void 0);
+                }
+            })
+        ]
+    });
+}
+function controlValue(field, value) {
+    if (null != value) return value;
+    switch(field.type){
+        case 'text':
+        case 'email':
+        case 'textarea':
+        case 'number':
+        case 'select':
+        case 'radio':
+            return '';
+        case 'multiselect':
+        case 'string-list':
+            return [];
+        default:
+            return;
+    }
+}
+function activeModeOf(config, decodedMode, unset, heldMode) {
+    if (heldMode) return heldMode;
+    if (unset) return config.defaultMode ?? config.modes[0] ?? 'literal';
+    return decodedMode;
+}
+function controlElement(group, id) {
+    if (!group) return null;
+    for (const element of group.querySelectorAll('[id]'))if (element.id === id) return element;
+    return null;
+}
+function useActionContext(input) {
+    const inputRef = (0, external_react_namespaceObject.useRef)(input);
+    inputRef.current = input;
+    const { field, name, form, modeAware } = input;
+    return (0, external_react_namespaceObject.useMemo)(()=>{
+        const current = ()=>inputRef.current;
+        const setStored = (stored)=>{
+            const { codec, codecCtx, commit, write } = current();
+            if (codec && codecCtx) commit(codec.decode(stored, codecCtx).mode, stored, 'set');
+            else write(stored, 'set');
+        };
+        const ctx = {
+            field,
+            name,
+            form,
+            get value () {
+                return current().latest.current.value;
+            },
+            setValue: setStored,
+            clear: ()=>{
+                const { latest, encode, commit, write } = current();
+                const mode = latest.current.activeMode;
+                if (modeAware) commit(mode, encode(mode, null), 'set');
+                else write(null, 'set');
+            },
+            get empty () {
+                return current().latest.current.empty;
+            },
+            get disabled () {
+                return current().latest.current.disabled;
+            },
+            get strings () {
+                return current().strings;
+            },
+            get control () {
+                return current().control();
+            },
+            get insertable () {
+                return current().latest.current.insertable;
+            },
+            variables: ()=>current().variables()
+        };
+        if (modeAware) {
+            Object.defineProperty(ctx, 'mode', {
+                enumerable: true,
+                get: ()=>{
+                    const { decoded, activeMode } = current().latest.current;
+                    return decoded && {
+                        ...decoded,
+                        mode: activeMode
+                    };
+                }
+            });
+            ctx.setModeValue = (mode, value, options)=>current().setModeValue(mode, value, options);
+        }
+        return ctx;
+    }, [
+        field,
+        name,
+        form,
+        modeAware
+    ]);
+}
+function resolveControl(input) {
+    const { field, config, mode, registry } = input;
+    const named = config?.controls?.[mode];
+    let registration;
+    let source;
+    let componentProps;
+    if (named) {
+        const controlName = 'string' == typeof named ? named : named.component;
+        registration = registry.controlRegistry[controlName];
+        source = 'field';
+        componentProps = 'string' == typeof named ? void 0 : named.componentProps;
+    }
+    if (!registration && 'literal' === mode && registry.literalControls[field.type]) {
+        registration = registry.literalControls[field.type];
+        source = 'literal-controls';
+    }
+    if (!registration && registry.definitions[mode]?.control) {
+        registration = registry.definitions[mode]?.control;
+        source = 'definition';
+    }
+    if (registration && source) {
+        const Control = registration.component;
+        return {
+            node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Control, {
+                ...componentProps,
+                ...input.valueModeProps()
+            }),
+            geometry: registrationGeometry(registration),
+            source
+        };
+    }
+    if ('literal' === mode) return builtInLiteral(input);
+    const builtIn = BUILT_IN_MODE_CONTROLS[mode];
+    if (builtIn) {
+        const Control = builtIn.component;
+        return {
+            node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Control, {
+                ...input.valueModeProps()
+            }),
+            geometry: registrationGeometry(builtIn),
+            source: 'built-in'
+        };
+    }
+    if ('expression' === mode) return {
+        node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FallbackControl, {
+            ...input
+        }),
+        geometry: TEXT_GEOMETRY,
+        source: 'built-in'
+    };
+    return {
+        node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FallbackControl, {
+            ...input
+        }),
+        geometry: TEXT_GEOMETRY,
+        source: 'fallback'
+    };
+}
+function FallbackControl({ field, binding, disabled, error, errorId }) {
+    const { value } = binding;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+        id: field.name,
+        name: binding.name,
+        ref: binding.ref,
+        value: 'string' == typeof value ? value : null == value ? '' : String(value),
+        onChange: (event)=>binding.onChange(event.target.value),
+        onBlur: binding.onBlur,
+        placeholder: field.placeholder,
+        disabled: disabled,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        "aria-errormessage": error ? errorId : void 0
+    });
+}
+function builtInLiteral(input) {
+    const { field, binding, options, disabled, required, error, strings, customComponents } = input;
+    if ('custom' === field.type) {
+        const entry = customComponents[field.component];
+        if (!entry) return {
+            node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FallbackControl, {
+                ...input
+            }),
+            geometry: TEXT_GEOMETRY,
+            source: 'fallback'
+        };
+        const registration = (0, external_value_modes_cjs_namespaceObject.isFieldControlRegistration)(entry) ? entry : {
+            component: entry
+        };
+        const Component = registration.component;
+        const { ref: _ref, ...bindingProps } = binding;
+        return {
+            node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, {
+                ...bindingProps,
+                ...field.componentProps,
+                field: field,
+                disabled: disabled,
+                required: required,
+                error: error,
+                controlRef: input.controlRef,
+                labelId: input.labelId
+            }),
+            geometry: registrationGeometry(registration),
+            source: 'custom'
+        };
+    }
+    return {
+        node: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_field_control_cjs_namespaceObject.FieldControl, {
+            field: field,
+            formField: binding,
+            options: options,
+            disabled: disabled,
+            invalid: !!error,
+            strings: strings.boolean
+        }),
+        geometry: external_field_control_cjs_namespaceObject.FIELD_CONTROL_GEOMETRY[field.type] ?? unfittedGeometry(field),
+        source: 'field-type'
+    };
+}
+exports.ModeAwareField = __webpack_exports__.ModeAwareField;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ModeAwareField"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/forms/mode-aware-field.d.ts

@@ -0,0 +1,15 @@
+import type { CustomComponents, FieldMetadata, FieldOption, FormContext } from './form-schema';
+export interface ModeAwareFieldProps {
+    field: FieldMetadata;
+    context: FormContext;
+    customComponents: CustomComponents;
+    disabled: boolean;
+    required: boolean;
+    options: FieldOption[];
+}
+/**
+ * Renders a field with `valueModes`, `headerActions`, `menuActions` or `badge` as the field anatomy:
+ * header with its actions, then an `InputGroup` holding the mode glyph, the active mode's control
+ * and the trailing menu of modes and actions.
+ */
+export declare function ModeAwareField(props: ModeAwareFieldProps): import("react/jsx-runtime").JSX.Element;