@uipath/apollo-wind 2.60.1 → 2.62.0

package/dist/components/forms/field-control.cjs

@@ -0,0 +1,415 @@
+"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__, {
+    FIELD_CONTROL_GEOMETRY: ()=>FIELD_CONTROL_GEOMETRY,
+    FieldControl: ()=>FieldControl,
+    useSliderMax: ()=>useSliderMax,
+    clampSliderValue: ()=>clampSliderValue
+});
+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 boolean_radio_group_cjs_namespaceObject = require("../ui/boolean-radio-group.cjs");
+const checkbox_cjs_namespaceObject = require("../ui/checkbox.cjs");
+const date_picker_cjs_namespaceObject = require("../ui/date-picker.cjs");
+const datetime_picker_cjs_namespaceObject = require("../ui/datetime-picker.cjs");
+const file_upload_cjs_namespaceObject = require("../ui/file-upload.cjs");
+const input_cjs_namespaceObject = require("../ui/input.cjs");
+const label_cjs_namespaceObject = require("../ui/label.cjs");
+const multi_select_cjs_namespaceObject = require("../ui/multi-select.cjs");
+const radio_group_cjs_namespaceObject = require("../ui/radio-group.cjs");
+const select_cjs_namespaceObject = require("../ui/select.cjs");
+const slider_cjs_namespaceObject = require("../ui/slider.cjs");
+const switch_cjs_namespaceObject = require("../ui/switch.cjs");
+const textarea_cjs_namespaceObject = require("../ui/textarea.cjs");
+const external_literal_value_context_cjs_namespaceObject = require("./literal-value-context.cjs");
+const external_string_list_field_cjs_namespaceObject = require("./string-list-field.cjs");
+const FIELD_CONTROL_GEOMETRY = {
+    text: {
+        layout: 'row',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: true
+    },
+    email: {
+        layout: 'row',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: true
+    },
+    number: {
+        layout: 'row',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: false
+    },
+    select: {
+        layout: 'row',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: false
+    },
+    textarea: {
+        layout: 'grow',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: true
+    },
+    file: {
+        layout: 'grow',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: false
+    },
+    multiselect: {
+        layout: 'grow',
+        variant: 'default',
+        labelTarget: 'control',
+        insertable: false
+    },
+    switch: {
+        layout: 'row',
+        variant: 'none',
+        labelTarget: 'control',
+        insertable: false
+    },
+    checkbox: {
+        layout: 'row',
+        variant: 'none',
+        labelTarget: 'control',
+        insertable: false
+    },
+    boolean: {
+        layout: 'row',
+        variant: 'none',
+        labelTarget: 'labelledby',
+        insertable: false
+    }
+};
+const NO_OPTIONS = [];
+const NO_SELECTION = [];
+function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false, invalid = false, strings }) {
+    const errorId = invalid ? `${field.name}-error` : void 0;
+    const { onChange } = formField;
+    const multipleFiles = 'file' === field.type && field.multiple;
+    const onTextChange = (0, external_react_namespaceObject.useCallback)((event)=>onChange(event.target.value), [
+        onChange
+    ]);
+    const onNumberChange = (0, external_react_namespaceObject.useCallback)((event)=>onChange(parseFloat(event.target.value)), [
+        onChange
+    ]);
+    const onCheckedChange = (0, external_react_namespaceObject.useCallback)((checked)=>onChange(true === checked), [
+        onChange
+    ]);
+    const onFilesChange = (0, external_react_namespaceObject.useCallback)((files)=>onChange(multipleFiles ? files : files[0]), [
+        onChange,
+        multipleFiles
+    ]);
+    const multiSelectOptions = (0, external_react_namespaceObject.useMemo)(()=>options.map((option)=>({
+                label: option.label,
+                value: String(option.value)
+            })), [
+        options
+    ]);
+    switch(field.type){
+        case 'text':
+        case 'email':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                id: field.name,
+                value: formField.value,
+                onChange: onTextChange,
+                onBlur: formField.onBlur,
+                name: formField.name,
+                ref: formField.ref,
+                type: field.type,
+                placeholder: field.placeholder,
+                disabled: disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                "aria-label": field.ariaLabel
+            });
+        case 'number':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                id: field.name,
+                value: formField.value,
+                onBlur: formField.onBlur,
+                name: formField.name,
+                ref: formField.ref,
+                type: "number",
+                min: field.min,
+                max: field.max,
+                step: field.step,
+                placeholder: field.placeholder,
+                disabled: disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                onChange: onNumberChange
+            });
+        case 'textarea':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(textarea_cjs_namespaceObject.Textarea, {
+                id: field.name,
+                value: formField.value,
+                onChange: onTextChange,
+                onBlur: formField.onBlur,
+                name: formField.name,
+                ref: formField.ref,
+                placeholder: field.placeholder,
+                disabled: disabled,
+                maxLength: field.maxLength,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                ...null != field.minRows ? {
+                    minRows: field.minRows
+                } : {
+                    rows: field.rows || 4
+                }
+            });
+        case 'select':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
+                value: formField.value,
+                onValueChange: formField.onChange,
+                disabled: disabled,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
+                        id: field.name,
+                        "aria-label": field.label,
+                        "aria-invalid": invalid || void 0,
+                        "aria-describedby": errorId,
+                        "aria-errormessage": errorId,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
+                            placeholder: field.placeholder || 'Select...'
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectContent, {
+                        children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectItem, {
+                                value: String(option.value),
+                                disabled: 'disabled' in option ? Boolean(option.disabled) : false,
+                                children: option.label
+                            }, String(option.value)))
+                    })
+                ]
+            });
+        case 'multiselect':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(multi_select_cjs_namespaceObject.MultiSelect, {
+                id: field.name,
+                selected: formField.value || NO_SELECTION,
+                onChange: formField.onChange,
+                options: multiSelectOptions,
+                disabled: disabled,
+                placeholder: field.placeholder || 'Select items...',
+                emptyMessage: field.emptyMessage ?? 'No items found.',
+                searchPlaceholder: field.searchPlaceholder ?? 'Search...',
+                maxSelected: field.maxSelected,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId
+            });
+        case 'checkbox':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(checkbox_cjs_namespaceObject.Checkbox, {
+                checked: true === formField.value,
+                onCheckedChange: onCheckedChange,
+                disabled: disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                id: field.name
+            });
+        case 'boolean':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(boolean_radio_group_cjs_namespaceObject.BooleanRadioGroup, {
+                "aria-labelledby": `${field.name}-label`,
+                value: 'boolean' == typeof formField.value ? formField.value : null,
+                onValueChange: formField.onChange,
+                onBlur: formField.onBlur,
+                disabled: disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                strings: strings
+            });
+        case 'switch':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                id: field.name,
+                checked: true === formField.value,
+                onCheckedChange: onCheckedChange,
+                disabled: disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId
+            });
+        case 'radio':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(radio_group_cjs_namespaceObject.RadioGroup, {
+                "aria-labelledby": `${field.name}-label`,
+                value: formField.value,
+                onValueChange: formField.onChange,
+                disabled: disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center space-x-2",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(radio_group_cjs_namespaceObject.RadioGroupItem, {
+                                value: String(option.value),
+                                id: `${field.name}-${option.value}`,
+                                disabled: 'disabled' in option ? Boolean(option.disabled) : false
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(label_cjs_namespaceObject.Label, {
+                                variant: "muted",
+                                htmlFor: `${field.name}-${option.value}`,
+                                children: option.label
+                            })
+                        ]
+                    }, String(option.value)))
+            });
+        case 'slider':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SliderControl, {
+                field: field,
+                formField: formField,
+                disabled: disabled,
+                invalid: invalid,
+                errorId: errorId
+            });
+        case 'date':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(date_picker_cjs_namespaceObject.DatePicker, {
+                id: field.name,
+                value: formField.value,
+                onValueChange: formField.onChange,
+                disabled: disabled,
+                placeholder: field.placeholder,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId
+            });
+        case 'datetime':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(datetime_picker_cjs_namespaceObject.DateTimePicker, {
+                "aria-labelledby": `${field.name}-label`,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                value: formField.value,
+                onValueChange: formField.onChange,
+                disabled: disabled,
+                placeholder: field.placeholder,
+                use12Hour: field.use12Hour
+            });
+        case 'file':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(file_upload_cjs_namespaceObject.FileUpload, {
+                id: field.name,
+                ariaLabel: field.ariaLabel ?? field.label,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": errorId,
+                "aria-errormessage": errorId,
+                accept: field.accept,
+                multiple: field.multiple,
+                disabled: disabled,
+                maxSize: field.maxSize,
+                showPreview: field.showPreview,
+                onFilesChange: onFilesChange
+            });
+        case 'string-list':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_string_list_field_cjs_namespaceObject.StringListControl, {
+                field: field,
+                inputRef: formField.ref,
+                value: formField.value,
+                onChange: formField.onChange,
+                onBlur: formField.onBlur,
+                invalid: invalid,
+                disabled: disabled
+            });
+        default:
+            return null;
+    }
+}
+function SliderControl({ field, formField, disabled, invalid, errorId }) {
+    const resolvedMax = useSliderMax(field);
+    const prevMaxRef = (0, external_react_namespaceObject.useRef)(resolvedMax);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (resolvedMax === prevMaxRef.current) return;
+        prevMaxRef.current = resolvedMax;
+        const v = formField.value;
+        if ('number' == typeof v && v > resolvedMax) formField.onChange(resolvedMax);
+    }, [
+        resolvedMax,
+        formField.value,
+        formField.onChange
+    ]);
+    const displayValue = clampSliderValue(formField.value, resolvedMax);
+    const sliderValue = (0, external_react_namespaceObject.useMemo)(()=>[
+            displayValue ?? field.min ?? 0
+        ], [
+        displayValue,
+        field.min
+    ]);
+    const { onChange } = formField;
+    const onValueChange = (0, external_react_namespaceObject.useCallback)((values)=>onChange(values[0]), [
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(slider_cjs_namespaceObject.Slider, {
+        "aria-labelledby": `${field.name}-label`,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": errorId,
+        "aria-errormessage": errorId,
+        value: sliderValue,
+        onValueChange: onValueChange,
+        min: field.min || 0,
+        max: resolvedMax,
+        step: field.step || 1,
+        disabled: disabled
+    });
+}
+function useSliderMax(field) {
+    const { watch } = (0, external_react_hook_form_namespaceObject.useFormContext)();
+    const readValue = (0, external_react_namespaceObject.useContext)(external_literal_value_context_cjs_namespaceObject.LiteralValueContext);
+    const watchedMax = field.maxRef ? readValue(field.maxRef.fromField, watch(field.maxRef.fromField)) : void 0;
+    return resolveSliderMax(field, watchedMax);
+}
+function clampSliderValue(value, max) {
+    return 'number' == typeof value ? Math.min(value, max) : value;
+}
+function resolveSliderMax(field, watchedValue) {
+    if (field.maxRef) {
+        if ('number' == typeof watchedValue && Number.isFinite(watchedValue) && watchedValue > 0) return watchedValue;
+        if ('number' == typeof field.maxRef.fallback) return field.maxRef.fallback;
+    }
+    if ('number' == typeof field.max) return field.max;
+    return 100;
+}
+exports.FIELD_CONTROL_GEOMETRY = __webpack_exports__.FIELD_CONTROL_GEOMETRY;
+exports.FieldControl = __webpack_exports__.FieldControl;
+exports.clampSliderValue = __webpack_exports__.clampSliderValue;
+exports.useSliderMax = __webpack_exports__.useSliderMax;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FIELD_CONTROL_GEOMETRY",
+    "FieldControl",
+    "clampSliderValue",
+    "useSliderMax"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/forms/field-control.d.ts

@@ -0,0 +1,52 @@
+import type * as React from 'react';
+import { type BooleanRadioGroupStrings } from '../ui/boolean-radio-group';
+import type { InputGroupLayout, InputGroupProps } from '../ui/input-group';
+import type { FieldMetadata, FieldOption, FieldType, SliderFieldMetadata } from './form-schema';
+/** The react-hook-form `Controller` binding a control reads and writes. */
+export interface FieldControlFormField {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+    name: string;
+    ref: React.Ref<unknown>;
+}
+export interface FieldControlProps {
+    field: FieldMetadata;
+    formField: FieldControlFormField;
+    /** The resolved options of a select, multiselect or radio field. */
+    options?: FieldOption[];
+    disabled?: boolean;
+    /** Marks the control invalid and points it at the `${field.name}-error` message. */
+    invalid?: boolean;
+    /** Labels of a `boolean` field's radios. */
+    strings?: Partial<BooleanRadioGroupStrings>;
+}
+/**
+ * How a field's label reaches its control: `control` labels it with `htmlFor` the control's id
+ * (`field.name`), and `labelledby` has the control name itself with `aria-labelledby` the label's
+ * id (`${field.name}-label`).
+ */
+export type FieldControlLabelTarget = 'control' | 'labelledby';
+/** How a field type's control sits in an `InputGroup`. */
+export interface FieldControlGeometry {
+    layout: InputGroupLayout;
+    variant: NonNullable<InputGroupProps['variant']>;
+    labelTarget: FieldControlLabelTarget;
+    /** Whether text can be inserted at the caret, as Insert variable does. */
+    insertable: boolean;
+}
+/**
+ * Each field type's geometry inside an `InputGroup`. Types not listed have not been fitted to one
+ * yet.
+ */
+export declare const FIELD_CONTROL_GEOMETRY: Readonly<Partial<Record<FieldType, FieldControlGeometry>>>;
+/**
+ * The bare control for a field's type, without its label, description or error. Its id is
+ * `field.name`, and it names the label and error by `${field.name}-label` and
+ * `${field.name}-error`, so those are the ids to give them. Custom fields render nothing.
+ */
+export declare function FieldControl({ field, formField, options, disabled, invalid, strings, }: FieldControlProps): import("react/jsx-runtime").JSX.Element | null;
+/** The slider's effective max, following `field.maxRef` when it has one. */
+export declare function useSliderMax(field: SliderFieldMetadata): number;
+/** A numeric slider value capped at `max`; anything else as it is. */
+export declare function clampSliderValue(value: unknown, max: number): unknown;