@uipath/apollo-wind 2.62.0 → 2.64.0

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

@@ -14,6 +14,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { Slider } from "../ui/slider.js";
 import { Switch } from "../ui/switch.js";
 import { Textarea } from "../ui/textarea.js";
+import { joinIds } from "./aria-ids.js";
 import { LiteralValueContext } from "./literal-value-context.js";
 import { StringListControl } from "./string-list-field.js";
 const FIELD_CONTROL_GEOMETRY = {
@@ -80,8 +81,9 @@ const FIELD_CONTROL_GEOMETRY = {
 };
 const NO_OPTIONS = [];
 const NO_SELECTION = [];
-function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false, invalid = false, strings }) {
+function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false, invalid = false, strings, describedBy }) {
     const errorId = invalid ? `${field.name}-error` : void 0;
+    const describedById = joinIds(errorId, describedBy);
     const { onChange } = formField;
     const multipleFiles = 'file' === field.type && field.multiple;
     const onTextChange = useCallback((event)=>onChange(event.target.value), [
@@ -117,7 +119,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 placeholder: field.placeholder,
                 disabled: disabled,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 "aria-label": field.ariaLabel
             });
@@ -135,7 +137,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 placeholder: field.placeholder,
                 disabled: disabled,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 onChange: onNumberChange
             });
@@ -151,7 +153,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 disabled: disabled,
                 maxLength: field.maxLength,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 ...null != field.minRows ? {
                     minRows: field.minRows
@@ -169,7 +171,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                         id: field.name,
                         "aria-label": field.label,
                         "aria-invalid": invalid || void 0,
-                        "aria-describedby": errorId,
+                        "aria-describedby": describedById,
                         "aria-errormessage": errorId,
                         children: /*#__PURE__*/ jsx(SelectValue, {
                             placeholder: field.placeholder || 'Select...'
@@ -196,7 +198,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 searchPlaceholder: field.searchPlaceholder ?? 'Search...',
                 maxSelected: field.maxSelected,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId
             });
         case 'checkbox':
@@ -205,7 +207,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 onCheckedChange: onCheckedChange,
                 disabled: disabled,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 id: field.name
             });
@@ -217,7 +219,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 onBlur: formField.onBlur,
                 disabled: disabled,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 strings: strings
             });
@@ -228,7 +230,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 onCheckedChange: onCheckedChange,
                 disabled: disabled,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId
             });
         case 'radio':
@@ -238,7 +240,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 onValueChange: formField.onChange,
                 disabled: disabled,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 children: options.map((option)=>/*#__PURE__*/ jsxs("div", {
                         className: "flex items-center space-x-2",
@@ -262,7 +264,8 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 formField: formField,
                 disabled: disabled,
                 invalid: invalid,
-                errorId: errorId
+                errorId: errorId,
+                describedById: describedById
             });
         case 'date':
             return /*#__PURE__*/ jsx(DatePicker, {
@@ -272,14 +275,14 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 disabled: disabled,
                 placeholder: field.placeholder,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId
             });
         case 'datetime':
             return /*#__PURE__*/ jsx(DateTimePicker, {
                 "aria-labelledby": `${field.name}-label`,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 value: formField.value,
                 onValueChange: formField.onChange,
@@ -292,7 +295,7 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 id: field.name,
                 ariaLabel: field.ariaLabel ?? field.label,
                 "aria-invalid": invalid || void 0,
-                "aria-describedby": errorId,
+                "aria-describedby": describedById,
                 "aria-errormessage": errorId,
                 accept: field.accept,
                 multiple: field.multiple,
@@ -309,13 +312,14 @@ function FieldControl({ field, formField, options = NO_OPTIONS, disabled = false
                 onChange: formField.onChange,
                 onBlur: formField.onBlur,
                 invalid: invalid,
-                disabled: disabled
+                disabled: disabled,
+                ariaDescribedBy: describedById
             });
         default:
             return null;
     }
 }
-function SliderControl({ field, formField, disabled, invalid, errorId }) {
+function SliderControl({ field, formField, disabled, invalid, errorId, describedById }) {
     const resolvedMax = useSliderMax(field);
     const prevMaxRef = useRef(resolvedMax);
     useEffect(()=>{
@@ -342,7 +346,7 @@ function SliderControl({ field, formField, disabled, invalid, errorId }) {
     return /*#__PURE__*/ jsx(Slider, {
         "aria-labelledby": `${field.name}-label`,
         "aria-invalid": invalid || void 0,
-        "aria-describedby": errorId,
+        "aria-describedby": describedById,
         "aria-errormessage": errorId,
         value: sliderValue,
         onValueChange: onValueChange,

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

@@ -31,6 +31,7 @@ const external_react_namespaceObject = require("react");
 const external_react_hook_form_namespaceObject = require("react-hook-form");
 const form_field_cjs_namespaceObject = require("../ui/form-field.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const external_aria_ids_cjs_namespaceObject = require("./aria-ids.cjs");
 const external_data_fetcher_cjs_namespaceObject = require("./data-fetcher.cjs");
 const external_field_control_cjs_namespaceObject = require("./field-control.cjs");
 const external_form_schema_cjs_namespaceObject = require("./form-schema.cjs");
@@ -40,6 +41,7 @@ const external_string_list_field_cjs_namespaceObject = require("./string-list-fi
 const external_value_modes_cjs_namespaceObject = require("./value-modes.cjs");
 function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
     const { control, watch, getValues } = (0, external_react_hook_form_namespaceObject.useFormContext)();
+    const changedNoteId = `${(0, external_react_namespaceObject.useId)()}-changed`;
     const contextRef = (0, external_react_namespaceObject.useRef)(context);
     contextRef.current = context;
     const readValues = (0, external_react_namespaceObject.useCallback)(()=>(0, external_value_modes_cjs_namespaceObject.literalValues)(getValues(), contextRef.current.schema, contextRef.current.valueModes?.codecs), [
@@ -174,63 +176,88 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const gridStyle = {
         gridColumn: `span ${gridSpan}`
     };
-    if (field.valueModes || field.headerActions || field.menuActions || field.badge) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    const isChanged = context.changedFields?.has(field.name) ?? false;
+    const wrapperProps = {
         style: gridStyle,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_mode_aware_field_cjs_namespaceObject.ModeAwareField, {
-            field: field,
-            context: context,
-            customComponents: customComponents,
-            disabled: formDisabled || fieldState.disabled,
-            required: fieldState.required,
-            options: fieldState.options
-        })
+        className: isChanged ? '-ml-2 rounded-md border-l-2 border-warning bg-warning-background/30 pl-1.5' : void 0,
+        'data-field-name': field.name,
+        'data-changed': isChanged || void 0
+    };
+    const changedNote = isChanged ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+        id: changedNoteId,
+        className: "sr-only",
+        children: context.changedFieldLabel ?? 'Changed'
+    }) : null;
+    if (field.valueModes || field.headerActions || field.menuActions || field.badge) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ...wrapperProps,
+        children: [
+            changedNote,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_mode_aware_field_cjs_namespaceObject.ModeAwareField, {
+                field: field,
+                context: context,
+                customComponents: customComponents,
+                disabled: formDisabled || fieldState.disabled,
+                required: fieldState.required,
+                options: fieldState.options,
+                describedBy: isChanged ? changedNoteId : void 0
+            })
+        ]
     });
     const customEntry = (0, external_form_schema_cjs_namespaceObject.isCustomField)(field) ? customComponents[field.component] : void 0;
     if ((0, external_form_schema_cjs_namespaceObject.isCustomField)(field) && customEntry) {
         const CustomComponent = (0, external_value_modes_cjs_namespaceObject.isFieldControlRegistration)(customEntry) ? customEntry.component : customEntry;
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            style: gridStyle,
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            ...wrapperProps,
+            children: [
+                changedNote,
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
+                    name: field.name,
+                    control: control,
+                    defaultValue: field.defaultValue,
+                    render: ({ field: { ref: _ref, ...formField }, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CustomComponent, {
+                            ...formField,
+                            ...field.componentProps,
+                            field: field,
+                            disabled: formDisabled || fieldState.disabled,
+                            required: fieldState.required,
+                            error: error?.message,
+                            "aria-describedby": (0, external_aria_ids_cjs_namespaceObject.joinIds)(field.componentProps?.['aria-describedby'], isChanged && changedNoteId)
+                        })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ...wrapperProps,
+        children: [
+            changedNote,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
                 name: field.name,
                 control: control,
                 defaultValue: field.defaultValue,
-                render: ({ field: { ref: _ref, ...formField }, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CustomComponent, {
-                        ...formField,
-                        ...field.componentProps,
+                render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BuiltInField, {
                         field: field,
+                        formField: formField,
+                        error: error?.message,
                         disabled: formDisabled || fieldState.disabled,
                         required: fieldState.required,
-                        error: error?.message
+                        options: fieldState.options,
+                        strings: context.strings?.boolean,
+                        changedNoteId: isChanged ? changedNoteId : void 0
                     })
             })
-        });
-    }
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        style: gridStyle,
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
-            name: field.name,
-            control: control,
-            defaultValue: field.defaultValue,
-            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BuiltInField, {
-                    field: field,
-                    formField: formField,
-                    error: error?.message,
-                    disabled: formDisabled || fieldState.disabled,
-                    required: fieldState.required,
-                    options: fieldState.options,
-                    strings: context.strings?.boolean
-                })
-        })
+        ]
     });
 }
-function BuiltInField({ field, formField, error, disabled, required, options, strings }) {
+function BuiltInField({ field, formField, error, disabled, required, options, strings, changedNoteId }) {
     const control = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_field_control_cjs_namespaceObject.FieldControl, {
         field: field,
         formField: formField,
         options: options,
         disabled: disabled,
         invalid: !!error,
-        strings: strings
+        strings: strings,
+        describedBy: changedNoteId
     });
     switch(field.type){
         case 'checkbox':
@@ -331,7 +358,8 @@ function BuiltInField({ field, formField, error, disabled, required, options, st
                 onBlur: formField.onBlur,
                 error: error,
                 disabled: disabled,
-                required: required
+                required: required,
+                ariaDescribedBy: (0, external_aria_ids_cjs_namespaceObject.joinIds)(error && `${field.name}-error`, changedNoteId)
             });
         case 'custom':
             return null;

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

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { FormField, FormFieldDescription, FormFieldError, FormFieldLabel } from "../ui/form-field.js";
 import { deepEqual } from "../../lib/index.js";
+import { joinIds } from "./aria-ids.js";
 import { DataFetcher } from "./data-fetcher.js";
 import { FieldControl, clampSliderValue, useSliderMax } from "./field-control.js";
 import { hasOptions, isCustomField } from "./form-schema.js";
@@ -12,6 +13,7 @@ import { StringListField } from "./string-list-field.js";
 import { isFieldControlRegistration, literalValues } from "./value-modes.js";
 function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
     const { control, watch, getValues } = useFormContext();
+    const changedNoteId = `${useId()}-changed`;
     const contextRef = useRef(context);
     contextRef.current = context;
     const readValues = useCallback(()=>literalValues(getValues(), contextRef.current.schema, contextRef.current.valueModes?.codecs), [
@@ -146,63 +148,88 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
     const gridStyle = {
         gridColumn: `span ${gridSpan}`
     };
-    if (field.valueModes || field.headerActions || field.menuActions || field.badge) return /*#__PURE__*/ jsx("div", {
+    const isChanged = context.changedFields?.has(field.name) ?? false;
+    const wrapperProps = {
         style: gridStyle,
-        children: /*#__PURE__*/ jsx(ModeAwareField, {
-            field: field,
-            context: context,
-            customComponents: customComponents,
-            disabled: formDisabled || fieldState.disabled,
-            required: fieldState.required,
-            options: fieldState.options
-        })
+        className: isChanged ? '-ml-2 rounded-md border-l-2 border-warning bg-warning-background/30 pl-1.5' : void 0,
+        'data-field-name': field.name,
+        'data-changed': isChanged || void 0
+    };
+    const changedNote = isChanged ? /*#__PURE__*/ jsx("span", {
+        id: changedNoteId,
+        className: "sr-only",
+        children: context.changedFieldLabel ?? 'Changed'
+    }) : null;
+    if (field.valueModes || field.headerActions || field.menuActions || field.badge) return /*#__PURE__*/ jsxs("div", {
+        ...wrapperProps,
+        children: [
+            changedNote,
+            /*#__PURE__*/ jsx(ModeAwareField, {
+                field: field,
+                context: context,
+                customComponents: customComponents,
+                disabled: formDisabled || fieldState.disabled,
+                required: fieldState.required,
+                options: fieldState.options,
+                describedBy: isChanged ? changedNoteId : void 0
+            })
+        ]
     });
     const customEntry = isCustomField(field) ? customComponents[field.component] : void 0;
     if (isCustomField(field) && customEntry) {
         const CustomComponent = isFieldControlRegistration(customEntry) ? customEntry.component : customEntry;
-        return /*#__PURE__*/ jsx("div", {
-            style: gridStyle,
-            children: /*#__PURE__*/ jsx(Controller, {
+        return /*#__PURE__*/ jsxs("div", {
+            ...wrapperProps,
+            children: [
+                changedNote,
+                /*#__PURE__*/ jsx(Controller, {
+                    name: field.name,
+                    control: control,
+                    defaultValue: field.defaultValue,
+                    render: ({ field: { ref: _ref, ...formField }, fieldState: { error } })=>/*#__PURE__*/ jsx(CustomComponent, {
+                            ...formField,
+                            ...field.componentProps,
+                            field: field,
+                            disabled: formDisabled || fieldState.disabled,
+                            required: fieldState.required,
+                            error: error?.message,
+                            "aria-describedby": joinIds(field.componentProps?.['aria-describedby'], isChanged && changedNoteId)
+                        })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        ...wrapperProps,
+        children: [
+            changedNote,
+            /*#__PURE__*/ jsx(Controller, {
                 name: field.name,
                 control: control,
                 defaultValue: field.defaultValue,
-                render: ({ field: { ref: _ref, ...formField }, fieldState: { error } })=>/*#__PURE__*/ jsx(CustomComponent, {
-                        ...formField,
-                        ...field.componentProps,
+                render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(BuiltInField, {
                         field: field,
+                        formField: formField,
+                        error: error?.message,
                         disabled: formDisabled || fieldState.disabled,
                         required: fieldState.required,
-                        error: error?.message
+                        options: fieldState.options,
+                        strings: context.strings?.boolean,
+                        changedNoteId: isChanged ? changedNoteId : void 0
                     })
             })
-        });
-    }
-    return /*#__PURE__*/ jsx("div", {
-        style: gridStyle,
-        children: /*#__PURE__*/ jsx(Controller, {
-            name: field.name,
-            control: control,
-            defaultValue: field.defaultValue,
-            render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(BuiltInField, {
-                    field: field,
-                    formField: formField,
-                    error: error?.message,
-                    disabled: formDisabled || fieldState.disabled,
-                    required: fieldState.required,
-                    options: fieldState.options,
-                    strings: context.strings?.boolean
-                })
-        })
+        ]
     });
 }
-function BuiltInField({ field, formField, error, disabled, required, options, strings }) {
+function BuiltInField({ field, formField, error, disabled, required, options, strings, changedNoteId }) {
     const control = /*#__PURE__*/ jsx(FieldControl, {
         field: field,
         formField: formField,
         options: options,
         disabled: disabled,
         invalid: !!error,
-        strings: strings
+        strings: strings,
+        describedBy: changedNoteId
     });
     switch(field.type){
         case 'checkbox':
@@ -303,7 +330,8 @@ function BuiltInField({ field, formField, error, disabled, required, options, st
                 onBlur: formField.onBlur,
                 error: error,
                 disabled: disabled,
-                required: required
+                required: required,
+                ariaDescribedBy: joinIds(error && `${field.name}-error`, changedNoteId)
             });
         case 'custom':
             return null;