@uipath/apollo-wind 2.62.0 → 2.64.0

package/dist/components/forms/form-examples.cjs

@@ -24,11 +24,9 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    automationJobSchema: ()=>automationJobSchema,
+    multiStepSchema: ()=>multiStepSchema,
     cascadingDropdownsSchema: ()=>cascadingDropdownsSchema,
     fileUploadSchema: ()=>fileUploadSchema,
-    computedFieldsSchema: ()=>computedFieldsSchema,
-    multiStepSchema: ()=>multiStepSchema,
     conditionalQuestionsSchema: ()=>conditionalQuestionsSchema,
     conditionalSectionsSchema: ()=>conditionalSectionsSchema,
     FileUploadExample: ()=>FileUploadExample
@@ -36,10 +34,10 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const external_sonner_namespaceObject = require("sonner");
+const badge_cjs_namespaceObject = require("../ui/badge.cjs");
+const card_cjs_namespaceObject = require("../ui/card.cjs");
 const external_metadata_form_cjs_namespaceObject = require("./metadata-form.cjs");
 const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
-const card_cjs_namespaceObject = require("../ui/card.cjs");
-const badge_cjs_namespaceObject = require("../ui/badge.cjs");
 const cascadingDropdownsSchema = {
     id: 'user-registration',
     title: 'User Registration',
@@ -137,86 +135,6 @@ const cascadingDropdownsSchema = {
         }
     ]
 };
-const computedFieldsSchema = {
-    id: 'product-configurator',
-    title: 'Product Configuration',
-    description: 'Customize your product',
-    sections: [
-        {
-            id: 'product-selection',
-            title: 'Select Your Product',
-            fields: [
-                {
-                    name: 'category',
-                    type: 'select',
-                    label: 'Product Category',
-                    dataSource: {
-                        type: 'fetch',
-                        url: '/api/product-categories',
-                        method: 'GET',
-                        transform: 'data.categories.map(c => ({ label: c.name, value: c.id }))'
-                    }
-                },
-                {
-                    name: 'product',
-                    type: 'select',
-                    label: 'Select Product',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/products',
-                        params: {
-                            categoryId: '$category'
-                        }
-                    },
-                    rules: [
-                        new external_rules_engine_cjs_namespaceObject.RuleBuilder('show-product-when-category-selected').when('category').isNot('').show().require().build()
-                    ]
-                },
-                {
-                    name: 'variant',
-                    type: 'select',
-                    label: 'Product Variant (includes price)',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/product-variants',
-                        params: {
-                            productId: '$product'
-                        }
-                    },
-                    rules: [
-                        new external_rules_engine_cjs_namespaceObject.RuleBuilder('show-variant-when-product-selected').when('product').isNot('').show().require().build()
-                    ]
-                }
-            ]
-        },
-        {
-            id: 'order',
-            title: 'Order Details',
-            fields: [
-                {
-                    name: 'quantity',
-                    type: 'number',
-                    label: 'Quantity',
-                    placeholder: '1',
-                    min: 1,
-                    max: 100,
-                    defaultValue: 1,
-                    validation: {
-                        required: true,
-                        min: 1,
-                        max: 100
-                    }
-                },
-                {
-                    name: 'notes',
-                    type: 'textarea',
-                    label: 'Order Notes',
-                    placeholder: 'Any special instructions...'
-                }
-            ]
-        }
-    ]
-};
 const conditionalSectionsSchema = {
     id: 'job-application',
     title: 'Job Application',
@@ -473,107 +391,6 @@ const conditionalQuestionsSchema = {
         }
     ]
 };
-const automationJobSchema = {
-    id: 'automation-job-config',
-    title: 'Configure Automation Job',
-    description: 'Set up an automation process execution',
-    sections: [
-        {
-            id: 'process',
-            title: 'Process Selection',
-            fields: [
-                {
-                    name: 'folder',
-                    type: 'select',
-                    label: 'Orchestrator Folder',
-                    dataSource: {
-                        type: 'fetch',
-                        url: '/api/orchestrator/folders',
-                        method: 'GET',
-                        transform: 'data.value.map(f => ({ label: f.DisplayName, value: f.Id }))'
-                    }
-                },
-                {
-                    name: 'process',
-                    type: 'select',
-                    label: 'Process Package',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/orchestrator/processes',
-                        params: {
-                            folderId: '$folder'
-                        }
-                    },
-                    rules: [
-                        new external_rules_engine_cjs_namespaceObject.RuleBuilder('show-process').when('folder').isNot('').show().require().build()
-                    ]
-                },
-                {
-                    name: 'version',
-                    type: 'select',
-                    label: 'Package Version',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/orchestrator/package-versions',
-                        params: {
-                            processKey: '$process'
-                        }
-                    },
-                    rules: [
-                        new external_rules_engine_cjs_namespaceObject.RuleBuilder('show-version').when('process').isNot('').show().require().build()
-                    ]
-                }
-            ]
-        },
-        {
-            id: 'execution',
-            title: 'Execution Settings',
-            fields: [
-                {
-                    name: 'robot',
-                    type: 'select',
-                    label: 'Robot',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/orchestrator/robots',
-                        params: {
-                            folderId: '$folder'
-                        }
-                    },
-                    rules: [
-                        new external_rules_engine_cjs_namespaceObject.RuleBuilder('show-robot').when('folder').isNot('').show().require().build()
-                    ]
-                },
-                {
-                    name: 'priority',
-                    type: 'select',
-                    label: 'Priority',
-                    options: [
-                        {
-                            label: 'Low',
-                            value: 'Low'
-                        },
-                        {
-                            label: 'Normal',
-                            value: 'Normal'
-                        },
-                        {
-                            label: 'High',
-                            value: 'High'
-                        }
-                    ],
-                    defaultValue: 'Normal'
-                },
-                {
-                    name: 'inputArguments',
-                    type: 'textarea',
-                    label: 'Input Arguments (JSON)',
-                    placeholder: '{"argument1": "value1"}'
-                }
-            ]
-        }
-    ]
-};
 const multiStepSchema = {
     id: 'user-onboarding',
     title: "Welcome! Let's set up your account",
@@ -940,18 +757,14 @@ function FileUploadExample() {
     });
 }
 exports.FileUploadExample = __webpack_exports__.FileUploadExample;
-exports.automationJobSchema = __webpack_exports__.automationJobSchema;
 exports.cascadingDropdownsSchema = __webpack_exports__.cascadingDropdownsSchema;
-exports.computedFieldsSchema = __webpack_exports__.computedFieldsSchema;
 exports.conditionalQuestionsSchema = __webpack_exports__.conditionalQuestionsSchema;
 exports.conditionalSectionsSchema = __webpack_exports__.conditionalSectionsSchema;
 exports.fileUploadSchema = __webpack_exports__.fileUploadSchema;
 exports.multiStepSchema = __webpack_exports__.multiStepSchema;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "FileUploadExample",
-    "automationJobSchema",
     "cascadingDropdownsSchema",
-    "computedFieldsSchema",
     "conditionalQuestionsSchema",
     "conditionalSectionsSchema",
     "fileUploadSchema",

package/dist/components/forms/form-examples.d.ts

@@ -13,11 +13,6 @@ import type { FormSchema } from './form-schema';
  * Country -> State -> City selection with remote data fetching.
  */
 export declare const cascadingDropdownsSchema: FormSchema;
-/**
- * Demonstrates cascading product selection.
- * Category -> Product -> Variant with pricing shown in variant label.
- */
-export declare const computedFieldsSchema: FormSchema;
 /**
  * Demonstrates conditional sections and multi-select fields.
  * Shows different fields based on experience level.
@@ -28,11 +23,6 @@ export declare const conditionalSectionsSchema: FormSchema;
  * Shows follow-up questions based on ratings.
  */
 export declare const conditionalQuestionsSchema: FormSchema;
-/**
- * Demonstrates UiPath Orchestrator-style cascading selection.
- * Folder -> Process -> Version -> Robot selection.
- */
-export declare const automationJobSchema: FormSchema;
 /**
  * Demonstrates multi-step form wizard pattern.
  * Step-by-step user onboarding with data pre-loading.

package/dist/components/forms/form-examples.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { toast } from "sonner";
+import { Badge } from "../ui/badge.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
 import { MetadataForm } from "./metadata-form.js";
 import { RuleBuilder } from "./rules-engine.js";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
-import { Badge } from "../ui/badge.js";
 const cascadingDropdownsSchema = {
     id: 'user-registration',
     title: 'User Registration',
@@ -102,86 +102,6 @@ const cascadingDropdownsSchema = {
         }
     ]
 };
-const computedFieldsSchema = {
-    id: 'product-configurator',
-    title: 'Product Configuration',
-    description: 'Customize your product',
-    sections: [
-        {
-            id: 'product-selection',
-            title: 'Select Your Product',
-            fields: [
-                {
-                    name: 'category',
-                    type: 'select',
-                    label: 'Product Category',
-                    dataSource: {
-                        type: 'fetch',
-                        url: '/api/product-categories',
-                        method: 'GET',
-                        transform: 'data.categories.map(c => ({ label: c.name, value: c.id }))'
-                    }
-                },
-                {
-                    name: 'product',
-                    type: 'select',
-                    label: 'Select Product',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/products',
-                        params: {
-                            categoryId: '$category'
-                        }
-                    },
-                    rules: [
-                        new RuleBuilder('show-product-when-category-selected').when('category').isNot('').show().require().build()
-                    ]
-                },
-                {
-                    name: 'variant',
-                    type: 'select',
-                    label: 'Product Variant (includes price)',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/product-variants',
-                        params: {
-                            productId: '$product'
-                        }
-                    },
-                    rules: [
-                        new RuleBuilder('show-variant-when-product-selected').when('product').isNot('').show().require().build()
-                    ]
-                }
-            ]
-        },
-        {
-            id: 'order',
-            title: 'Order Details',
-            fields: [
-                {
-                    name: 'quantity',
-                    type: 'number',
-                    label: 'Quantity',
-                    placeholder: '1',
-                    min: 1,
-                    max: 100,
-                    defaultValue: 1,
-                    validation: {
-                        required: true,
-                        min: 1,
-                        max: 100
-                    }
-                },
-                {
-                    name: 'notes',
-                    type: 'textarea',
-                    label: 'Order Notes',
-                    placeholder: 'Any special instructions...'
-                }
-            ]
-        }
-    ]
-};
 const conditionalSectionsSchema = {
     id: 'job-application',
     title: 'Job Application',
@@ -438,107 +358,6 @@ const conditionalQuestionsSchema = {
         }
     ]
 };
-const automationJobSchema = {
-    id: 'automation-job-config',
-    title: 'Configure Automation Job',
-    description: 'Set up an automation process execution',
-    sections: [
-        {
-            id: 'process',
-            title: 'Process Selection',
-            fields: [
-                {
-                    name: 'folder',
-                    type: 'select',
-                    label: 'Orchestrator Folder',
-                    dataSource: {
-                        type: 'fetch',
-                        url: '/api/orchestrator/folders',
-                        method: 'GET',
-                        transform: 'data.value.map(f => ({ label: f.DisplayName, value: f.Id }))'
-                    }
-                },
-                {
-                    name: 'process',
-                    type: 'select',
-                    label: 'Process Package',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/orchestrator/processes',
-                        params: {
-                            folderId: '$folder'
-                        }
-                    },
-                    rules: [
-                        new RuleBuilder('show-process').when('folder').isNot('').show().require().build()
-                    ]
-                },
-                {
-                    name: 'version',
-                    type: 'select',
-                    label: 'Package Version',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/orchestrator/package-versions',
-                        params: {
-                            processKey: '$process'
-                        }
-                    },
-                    rules: [
-                        new RuleBuilder('show-version').when('process').isNot('').show().require().build()
-                    ]
-                }
-            ]
-        },
-        {
-            id: 'execution',
-            title: 'Execution Settings',
-            fields: [
-                {
-                    name: 'robot',
-                    type: 'select',
-                    label: 'Robot',
-                    dataSource: {
-                        type: 'remote',
-                        endpoint: '/api/orchestrator/robots',
-                        params: {
-                            folderId: '$folder'
-                        }
-                    },
-                    rules: [
-                        new RuleBuilder('show-robot').when('folder').isNot('').show().require().build()
-                    ]
-                },
-                {
-                    name: 'priority',
-                    type: 'select',
-                    label: 'Priority',
-                    options: [
-                        {
-                            label: 'Low',
-                            value: 'Low'
-                        },
-                        {
-                            label: 'Normal',
-                            value: 'Normal'
-                        },
-                        {
-                            label: 'High',
-                            value: 'High'
-                        }
-                    ],
-                    defaultValue: 'Normal'
-                },
-                {
-                    name: 'inputArguments',
-                    type: 'textarea',
-                    label: 'Input Arguments (JSON)',
-                    placeholder: '{"argument1": "value1"}'
-                }
-            ]
-        }
-    ]
-};
 const multiStepSchema = {
     id: 'user-onboarding',
     title: "Welcome! Let's set up your account",
@@ -904,4 +723,4 @@ function FileUploadExample() {
         ]
     });
 }
-export { FileUploadExample, automationJobSchema, cascadingDropdownsSchema, computedFieldsSchema, conditionalQuestionsSchema, conditionalSectionsSchema, fileUploadSchema, multiStepSchema };
+export { FileUploadExample, cascadingDropdownsSchema, conditionalQuestionsSchema, conditionalSectionsSchema, fileUploadSchema, multiStepSchema };

package/dist/components/forms/form-schema.d.ts

@@ -445,6 +445,8 @@ export interface CustomFieldComponentProps {
     controlRef?: React.Ref<ValueModeControlHandle>;
     /** In the field anatomy: the label's id, for a component registered with `labelTarget: 'labelledby'`. */
     labelId?: string;
+    /** Id of the changed-field note while the field is flagged; put it on the focusable control. */
+    'aria-describedby'?: string;
     [key: string]: unknown;
 }
 /** Custom components by name, each bare or with its geometry inside the field anatomy. */
@@ -457,6 +459,10 @@ export interface FormContext<T extends FieldValues = FieldValues> {
     isSubmitting: boolean;
     isDirty: boolean;
     currentStep?: number;
+    /** Names of fields to flag as changed (see `MetadataFormProps.changedFields`). */
+    changedFields?: ReadonlySet<string>;
+    /** Screen-reader text announced on a changed field. */
+    changedFieldLabel?: string;
     evaluateConditions: (conditions: FieldCondition[]) => boolean;
     fetchData: (source: DataSource) => Promise<FieldOption[]>;
     registerCustomComponent: (name: string, component: React.ComponentType<CustomFieldComponentProps>) => void;

package/dist/components/forms/metadata-form.cjs

@@ -56,7 +56,7 @@ const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
 const external_validation_converter_cjs_namespaceObject = require("./validation-converter.cjs");
 const external_value_modes_cjs_namespaceObject = require("./value-modes.cjs");
 const DEFAULT_PLUGINS = [];
-function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange, container = 'form' }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange, container = 'form', changedFields, changedFieldLabel }) {
     const [currentStep, setCurrentStep] = (0, external_react_namespaceObject.useState)(0);
     const [customComponents, setCustomComponents] = (0, external_react_namespaceObject.useState)({});
     const [isInitialized, setIsInitialized] = (0, external_react_namespaceObject.useState)(false);
@@ -121,11 +121,17 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
     pluginsRef.current = plugins;
     const onSubmitRef = (0, external_react_namespaceObject.useRef)(onSubmit);
     onSubmitRef.current = onSubmit;
+    const changedFieldsKey = changedFields?.join('\0') ?? '';
+    const changedFieldSet = (0, external_react_namespaceObject.useMemo)(()=>changedFieldsKey ? new Set(changedFieldsKey.split('\0')) : void 0, [
+        changedFieldsKey
+    ]);
     const context = (0, external_react_namespaceObject.useMemo)(()=>{
         const readValues = (values)=>(0, external_value_modes_cjs_namespaceObject.literalValues)(values, stableSchema, valueModeRegistry.codecs);
         return {
             schema: stableSchema,
             form,
+            changedFields: changedFieldSet,
+            changedFieldLabel,
             get values () {
                 return valuesRef.current;
             },
@@ -159,6 +165,8 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         stableSchema,
         form,
         currentStep,
+        changedFieldSet,
+        changedFieldLabel,
         valueModeRegistry,
         fieldActionRegistry,
         formStrings,

package/dist/components/forms/metadata-form.d.ts

@@ -56,5 +56,12 @@ export interface MetadataFormProps {
      * Suppressing the action row is the schema's job, not this prop's: pass `actions: []`.
      */
     container?: 'form' | 'div';
+    /**
+     * Names of fields (matching `field.name`) to flag as changed, e.g. after an agent edit.
+     * Each gets an accent and a screen-reader label. Omit to flag none.
+     */
+    changedFields?: readonly string[];
+    /** Screen-reader text for a changed field. Defaults to "Changed"; pass a translated string. */
+    changedFieldLabel?: string;
 }
-export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, sectionVariant, activeStepId, onActiveStepChange, container, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, sectionVariant, activeStepId, onActiveStepChange, container, changedFields, changedFieldLabel, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/metadata-form.js

@@ -17,7 +17,7 @@ import { RulesEngine } from "./rules-engine.js";
 import { modeAwareSchema, validationConfigToZod } from "./validation-converter.js";
 import { buildValueModeRegistry, codecContext, isEmptyModeValue, literalValueOf, literalValues, resolveCodec } from "./value-modes.js";
 const DEFAULT_PLUGINS = [];
-function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange, container = 'form' }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange, container = 'form', changedFields, changedFieldLabel }) {
     const [currentStep, setCurrentStep] = useState(0);
     const [customComponents, setCustomComponents] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
@@ -82,11 +82,17 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
     pluginsRef.current = plugins;
     const onSubmitRef = useRef(onSubmit);
     onSubmitRef.current = onSubmit;
+    const changedFieldsKey = changedFields?.join('\0') ?? '';
+    const changedFieldSet = useMemo(()=>changedFieldsKey ? new Set(changedFieldsKey.split('\0')) : void 0, [
+        changedFieldsKey
+    ]);
     const context = useMemo(()=>{
         const readValues = (values)=>literalValues(values, stableSchema, valueModeRegistry.codecs);
         return {
             schema: stableSchema,
             form,
+            changedFields: changedFieldSet,
+            changedFieldLabel,
             get values () {
                 return valuesRef.current;
             },
@@ -120,6 +126,8 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         stableSchema,
         form,
         currentStep,
+        changedFieldSet,
+        changedFieldLabel,
         valueModeRegistry,
         fieldActionRegistry,
         formStrings,

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

@@ -38,6 +38,7 @@ 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_aria_ids_cjs_namespaceObject = require("./aria-ids.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");
@@ -95,7 +96,7 @@ const TEXT_GEOMETRY = {
     labelTarget: 'control',
     insertable: true
 };
-function FieldAnatomy({ field, context, customComponents, disabled, required, options, formField, error }) {
+function FieldAnatomy({ field, context, customComponents, disabled, required, options, formField, error, describedBy }) {
     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;
@@ -104,6 +105,7 @@ function FieldAnatomy({ field, context, customComponents, disabled, required, op
     const { name } = field;
     const errorId = `${name}-error`;
     const labelId = `${name}-label`;
+    const controlDescribedBy = (0, external_aria_ids_cjs_namespaceObject.joinIds)(error && errorId, describedBy);
     const formVariables = context.variables;
     const variables = (0, external_react_namespaceObject.useCallback)(()=>(0, external_field_actions_cjs_namespaceObject.resolveVariables)(formVariables, field), [
         formVariables,
@@ -263,6 +265,7 @@ function FieldAnatomy({ field, context, customComponents, disabled, required, op
         required,
         error,
         errorId,
+        describedBy,
         valueModeProps: ()=>({
                 value: inner,
                 onChange: (next)=>writeInner(next),
@@ -286,7 +289,7 @@ function FieldAnatomy({ field, context, customComponents, disabled, required, op
                 controlProps: {
                     'data-slot': 'input-group-control',
                     'aria-invalid': error ? true : void 0,
-                    'aria-describedby': error ? errorId : void 0,
+                    'aria-describedby': controlDescribedBy,
                     'aria-errormessage': error ? errorId : void 0
                 }
             })
@@ -520,7 +523,7 @@ function resolveControl(input) {
         source: 'fallback'
     };
 }
-function FallbackControl({ field, binding, disabled, error, errorId }) {
+function FallbackControl({ field, binding, disabled, error, errorId, describedBy }) {
     const { value } = binding;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
         id: field.name,
@@ -532,7 +535,7 @@ function FallbackControl({ field, binding, disabled, error, errorId }) {
         placeholder: field.placeholder,
         disabled: disabled,
         "aria-invalid": error ? true : void 0,
-        "aria-describedby": error ? errorId : void 0,
+        "aria-describedby": (0, external_aria_ids_cjs_namespaceObject.joinIds)(error && errorId, describedBy),
         "aria-errormessage": error ? errorId : void 0
     });
 }
@@ -561,7 +564,8 @@ function builtInLiteral(input) {
                 required: required,
                 error: error,
                 controlRef: input.controlRef,
-                labelId: input.labelId
+                labelId: input.labelId,
+                "aria-describedby": (0, external_aria_ids_cjs_namespaceObject.joinIds)(field.componentProps?.['aria-describedby'], input.describedBy)
             }),
             geometry: registrationGeometry(registration),
             source: 'custom'
@@ -574,7 +578,8 @@ function builtInLiteral(input) {
             options: options,
             disabled: disabled,
             invalid: !!error,
-            strings: strings.boolean
+            strings: strings.boolean,
+            describedBy: input.describedBy
         }),
         geometry: external_field_control_cjs_namespaceObject.FIELD_CONTROL_GEOMETRY[field.type] ?? unfittedGeometry(field),
         source: 'field-type'

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

@@ -6,6 +6,8 @@ export interface ModeAwareFieldProps {
     disabled: boolean;
     required: boolean;
     options: FieldOption[];
+    /** Further ids for the control's aria-describedby, after the error message's. */
+    describedBy?: string;
 }
 /**
  * Renders a field with `valueModes`, `headerActions`, `menuActions` or `badge` as the field anatomy: