@uipath/apollo-wind 2.60.0 → 2.61.0

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

@@ -0,0 +1,372 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { useFormContext } from "react-hook-form";
+import { BooleanRadioGroup } from "../ui/boolean-radio-group.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { DatePicker } from "../ui/date-picker.js";
+import { DateTimePicker } from "../ui/datetime-picker.js";
+import { FileUpload } from "../ui/file-upload.js";
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import { MultiSelect } from "../ui/multi-select.js";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+import { Slider } from "../ui/slider.js";
+import { Switch } from "../ui/switch.js";
+import { Textarea } from "../ui/textarea.js";
+import { LiteralValueContext } from "./literal-value-context.js";
+import { StringListControl } from "./string-list-field.js";
+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 = useCallback((event)=>onChange(event.target.value), [
+        onChange
+    ]);
+    const onNumberChange = useCallback((event)=>onChange(parseFloat(event.target.value)), [
+        onChange
+    ]);
+    const onCheckedChange = useCallback((checked)=>onChange(true === checked), [
+        onChange
+    ]);
+    const onFilesChange = useCallback((files)=>onChange(multipleFiles ? files : files[0]), [
+        onChange,
+        multipleFiles
+    ]);
+    const multiSelectOptions = useMemo(()=>options.map((option)=>({
+                label: option.label,
+                value: String(option.value)
+            })), [
+        options
+    ]);
+    switch(field.type){
+        case 'text':
+        case 'email':
+            return /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(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__*/ jsxs(Select, {
+                value: formField.value,
+                onValueChange: formField.onChange,
+                disabled: disabled,
+                children: [
+                    /*#__PURE__*/ jsx(SelectTrigger, {
+                        id: field.name,
+                        "aria-label": field.label,
+                        "aria-invalid": invalid || void 0,
+                        "aria-describedby": errorId,
+                        "aria-errormessage": errorId,
+                        children: /*#__PURE__*/ jsx(SelectValue, {
+                            placeholder: field.placeholder || 'Select...'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(SelectContent, {
+                        children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                                value: String(option.value),
+                                disabled: 'disabled' in option ? Boolean(option.disabled) : false,
+                                children: option.label
+                            }, String(option.value)))
+                    })
+                ]
+            });
+        case 'multiselect':
+            return /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(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__*/ jsx(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__*/ jsx(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__*/ jsxs("div", {
+                        className: "flex items-center space-x-2",
+                        children: [
+                            /*#__PURE__*/ jsx(RadioGroupItem, {
+                                value: String(option.value),
+                                id: `${field.name}-${option.value}`,
+                                disabled: 'disabled' in option ? Boolean(option.disabled) : false
+                            }),
+                            /*#__PURE__*/ jsx(Label, {
+                                variant: "muted",
+                                htmlFor: `${field.name}-${option.value}`,
+                                children: option.label
+                            })
+                        ]
+                    }, String(option.value)))
+            });
+        case 'slider':
+            return /*#__PURE__*/ jsx(SliderControl, {
+                field: field,
+                formField: formField,
+                disabled: disabled,
+                invalid: invalid,
+                errorId: errorId
+            });
+        case 'date':
+            return /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(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__*/ jsx(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 = useRef(resolvedMax);
+    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 = useMemo(()=>[
+            displayValue ?? field.min ?? 0
+        ], [
+        displayValue,
+        field.min
+    ]);
+    const { onChange } = formField;
+    const onValueChange = useCallback((values)=>onChange(values[0]), [
+        onChange
+    ]);
+    return /*#__PURE__*/ jsx(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 } = useFormContext();
+    const readValue = useContext(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;
+}
+export { FIELD_CONTROL_GEOMETRY, FieldControl, clampSliderValue, useSliderMax };