@wildo-ai/saas-frontend-lib 1.1.9 → 1.1.11

package/dist/esm/components/form/automated/AutomatedArrayField.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Renders a list of items with add/remove controls and optional
  * drag-and-drop reordering via @dnd-kit.
  */
-import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { useFieldArray, useFormContext, useWatch, Controller } from 'react-hook-form';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { SortableContext, useSortable, sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable';
@@ -18,18 +18,24 @@ import { IconSize, StandardIconReference } from '../../../core/icons/icon-regist
 import { Button, ButtonVariants_Variant } from '../../../components/actions/button.js';
 import { FieldDescription as ContentSectionDescription } from '../../../components/form/chromes/field.js';
 import { ContentSection, ContentSectionLegend, ContentSectionGroup, } from '../../../components/sections/content-section.js';
+import { FormFieldLegendVoice } from '../../../components/sections/section-legend-voice.js';
 import { cn } from '../../../core/ui/cn.js';
+import { focusIndicatorClasses, FocusIndicatorShape } from '../../../core/ui/themes/focus-indicator.js';
 import { FormField, resolveSurfaceAutoFieldDensity, resolveSurfaceAutoLabelPlacement, resolveSurfaceFormChromeMode } from './FormField.js';
 import { FormFieldEnum } from '../fields/form-field-enum.js';
 import { useUnstartedFieldVisit } from '../validation-errors/unstarted-field-visit.js';
 import { useOptionalFormTemplateContext } from './FormTemplateContext.js';
 import { InputRoot } from '../controls/input.js';
 import { getFieldError } from '../validation-errors/getFieldError.js';
-import { getArrayConstraints, getArrayItemSchema, getEnumValues, getSchemaType, getArrayUI, getObjectShape, getObjectKeys, ArrayAddMode, ArrayObjectItemLayout, FieldSchemaType, AutosaveTrigger, ValidationMode, getFieldUIEditConfig, SectionMode, EditChromeMode } from '@wildo-ai/zod-decorators';
+import { zodIssueParams } from '../validation-errors/zod-issue-resolver.js';
+import { ChipsInput } from '../../../components/form/controls/string/chips-input.js';
+import { getArrayConstraints, getArrayItemSchema, getEnumValues, getSchemaType, getArrayUI, getObjectShape, getObjectKeys, getResourceReferenceTargetSet, ArrayAddMode, ArrayListStyle, ArrayObjectItemLayout, FieldSchemaType, AutosaveTrigger, ValidationMode, getFieldUIEditConfig, SectionMode, EditChromeMode } from '@wildo-ai/zod-decorators';
 import { AutomatedLayoutFrontendUtils } from '../../../core/automated-layout/automated-layout.frontend.utils.js';
 import { FrontendComponentType, UIBehavior, TypographyVariant, ButtonSize } from '@wildo-ai/presets-components-models';
 import { useI18n } from '../../../core/i18n/useI18n.js';
-import { useOptionalAutosave } from './AutosaveContext.js';
+import { resolveFieldAutosaveTrigger, useOptionalAutosave } from './AutosaveContext.js';
+import { BulkFieldClearSlot } from './bulk-field-clear-context.js';
+import { ArrayAutosavesContext } from './useArrayItemAutosaveField.js';
 import { AutosaveFieldState } from '../form-field-types.js';
 import { AutosaveIndicator } from './autosave-indicator.js';
 import { useSurfacePolicy } from '../../../core/ui/SurfacePolicyContext.js';
@@ -52,7 +58,7 @@ const KEYBOARD_SENSOR_OPTIONS = { coordinateGetter: sortableKeyboardCoordinates
  * Drag handle button rendered on sortable items.
  */
 function DragHandle({ listeners, attributes, disabled, ariaLabel, renderIcon }) {
-    return (_jsx("button", { type: "button", className: cn("shrink-0 cursor-grab touch-none rounded p-0.5 text-muted-foreground/60", "hover:text-muted-foreground hover:bg-accent/50", "focus-ring-offset", "active:cursor-grabbing", disabled && "pointer-events-none opacity-0"), "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, ...attributes, ...listeners, children: renderIcon(StandardIconReference.GRIP_VERTICAL, { size: IconSize.SM }) }));
+    return (_jsx("button", { type: "button", className: cn("shrink-0 cursor-grab touch-none rounded p-0.5 text-muted-foreground/60", "hover:text-muted-foreground hover:bg-accent/50", focusIndicatorClasses(FocusIndicatorShape.OFFSET), "active:cursor-grabbing", disabled && "pointer-events-none opacity-0"), "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, ...attributes, ...listeners, children: renderIcon(StandardIconReference.GRIP_VERTICAL, { size: IconSize.SM }) }));
 }
 /**
  * Sortable wrapper for primitive array items (string, number, etc.).
@@ -103,14 +109,22 @@ function ObjectItemRowFields({ fieldName, itemSchema, primaryFieldName, disabled
     const keys = getObjectKeys(itemSchema);
     if (!shape || keys.length === 0)
         return null;
+    // A resource reference (#2471) is ONE value — its type, then a row of that type — so it is never split into its two
+    // members: the whole item goes to `FormField`, whose object branch picks it. It has no leading toggle.
+    if (getResourceReferenceTargetSet(itemSchema)) {
+        if (only === 'boolean')
+            return null;
+        return _jsx(FormField, { name: fieldName, schema: itemSchema, labelPlacement: "hidden", disabled: disabled, className: "min-w-0 flex-1" });
+    }
     const booleanKeys = keys.filter((k) => getSchemaType(shape[k]) === FieldSchemaType.BOOLEAN);
     const bodyKeys = keys.filter((k) => getSchemaType(shape[k]) !== FieldSchemaType.BOOLEAN);
     const renderKeys = only === 'boolean' ? booleanKeys : only === 'body' ? bodyKeys : [...booleanKeys, ...bodyKeys];
     return (_jsx(_Fragment, { children: renderKeys.map((key) => {
             const subName = `${fieldName}.${key}`;
-            // Same label chain as FormFieldComposite: context dotted-path label →
-            // humanized leaf fallback (array-index paths are absent from the map).
-            const subLabel = ctx?.fieldLabels?.[subName]
+            // Same label chain as FormFieldComposite: the context label, looked up by the
+            // index-free path the dictionary records (`checklist.done`, not `checklist.0.done`),
+            // then the raw leaf key.
+            const subLabel = ctx?.fieldLabels?.[AutomatedLayoutFrontendUtils.labelDictionaryPath(subName)]
                 ?? AutomatedLayoutFrontendUtils.unresolvedFieldLabel(key);
             return (_jsx(FormField, { name: subName, schema: shape[key], label: subLabel, labelPlacement: "hidden", disabled: disabled, 
                 // Field-chrome roots are `w-full` (see field-chrome context map,
@@ -164,6 +178,9 @@ function SortableObjectItem({ id, fieldName, fieldLabel, layout, primaryFieldNam
 }
 function ArrayQuickAddRow({ primaryField, itemSchema, onAdd, disabled, addLabel, placeholder, leadingGutterClassName, }) {
     const { renderIcon } = useIconRegistry();
+    // A calendar-day field in the new item starts as today in the reader's resolved zone (#2180).
+    const { resolvedRegionalPreferences } = useI18n();
+    const timeZone = resolvedRegionalPreferences?.timezone;
     const isNumeric = getSchemaType(primaryField.schema) === FieldSchemaType.NUMBER;
     const [rawValue, setRawValue] = useState('');
     const trimmed = rawValue.trim();
@@ -182,12 +199,12 @@ function ArrayQuickAddRow({ primaryField, itemSchema, onAdd, disabled, addLabel,
         const item = primaryField.name === null
             ? committedPrimary
             : {
-                ...AutomatedLayoutFrontendUtils.getDefaultValueForSchema(itemSchema),
+                ...AutomatedLayoutFrontendUtils.getDefaultValueForSchema(itemSchema, { timeZone }),
                 [primaryField.name]: committedPrimary,
             };
         onAdd(item);
         setRawValue('');
-    }, [disabled, rawValue, isNumeric, primaryField, itemSchema, onAdd]);
+    }, [disabled, rawValue, isNumeric, primaryField, itemSchema, onAdd, timeZone]);
     return (_jsxs("div", { className: "flex items-center gap-element", "data-testid": "array-quick-add-row", onKeyDown: (e) => {
             if (e.key === 'Enter') {
                 e.preventDefault();
@@ -195,7 +212,7 @@ function ArrayQuickAddRow({ primaryField, itemSchema, onAdd, disabled, addLabel,
             }
         }, children: [leadingGutterClassName && _jsx("span", { "aria-hidden": "true", className: cn('shrink-0', leadingGutterClassName) }), _jsx(InputRoot, { type: isNumeric ? 'number' : 'text', value: rawValue, onChange: (e) => setRawValue(e.target.value), placeholder: placeholder ?? addLabel, disabled: disabled, wrapperClassName: "flex-1", "aria-label": addLabel }), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.OUTLINE, onClick: commit, disabled: !canCommit, "aria-label": addLabel, children: renderIcon(StandardIconReference.PLUS, { size: IconSize.SM }) })] }));
 }
-function AutomatedArrayFieldComponent({ name, schema, label, description, disabled, className, renderField, addLabel: addLabelProp, itemLabel: itemLabelProp, reorderable: reorderableProp = true, sectionAppearance, chromeMode, objectItemLayout: objectItemLayoutOverride, enumLabels, allowedValues, }) {
+function AutomatedArrayFieldBody({ name, schema, label, description, disabled, className, renderField, addLabel: addLabelProp, itemLabel: itemLabelProp, reorderable: reorderableProp = true, sectionAppearance, chromeMode, hideLabel = false, objectItemLayout: objectItemLayoutOverride, enumLabels, allowedValues, }) {
     const { control, getFieldState, getValues, formState, trigger } = useFormContext();
     /*
      * The two branches below (multi-select combobox, checkbox group) hand their control RHF's own
@@ -205,10 +222,12 @@ function AutomatedArrayFieldComponent({ name, schema, label, description, disabl
      */
     const arrayFieldVisit = useUnstartedFieldVisit(name);
     const { renderIcon } = useIconRegistry();
-    const { tComponent, tErrorValidation, isReady } = useI18n({
+    const { tComponent, tErrorValidation, isReady, resolvedRegionalPreferences } = useI18n({
         component: FrontendComponentType.LOW_LEVEL_FORM_MESSAGE,
         keys: ['errors_validation'],
     });
+    // A calendar-day field in a new item starts as today in the reader's resolved zone (#2180).
+    const itemTimeZone = resolvedRegionalPreferences?.timezone;
     const { getRecipe } = useUI();
     const descriptionRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);
     const { formChromeMode, sectionChromeMode } = useFormChromeContext();
@@ -219,7 +238,12 @@ function AutomatedArrayFieldComponent({ name, schema, label, description, disabl
     const resolvedControlSize = resolveSurfaceAutoFieldDensity(surfacePolicy.autoRender?.autoFieldDensity);
     const hideInlineErrorForPolicy = surfacePolicy.autoRender?.autoErrorPlacement === 'summary-at-surface-top';
     // Autosave context (null if not within AutosaveProvider)
-    const autosaveContext = useOptionalAutosave();
+    // Null unless THIS array autosaves (`AutomatedArrayFieldComponent` decides, from the array's own declaration).
+    const contextAutosave = useOptionalAutosave();
+    const autosaveContext = useContext(ArrayAutosavesContext) ? contextAutosave : null;
+    // Saves the whole list at once, for a list that autosaves: a bulk form's explicit "empty on every record" is written as
+    // the list's other changes are (#2620). Absent, the clear waits for the form's save.
+    const saveListNow = autosaveContext ? (value) => autosaveContext.triggerSave(name, value, AutosaveTrigger.BLUR) : undefined;
     // Resolve labels from i18n with prop overrides
     const addLabel = addLabelProp ?? tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayAddItem');
     const itemLabel = itemLabelProp ?? tComponent(FrontendComponentType.LOW_LEVEL_FORM_MESSAGE, 'arrayItemLabel');
@@ -324,10 +348,10 @@ function AutomatedArrayFieldComponent({ name, schema, label, description, disabl
         if (!canAdd || disabled || isValidating)
             return;
         // Create default value based on item schema type
-        const defaultValue = AutomatedLayoutFrontendUtils.getDefaultValueForSchema(itemSchema);
+        const defaultValue = AutomatedLayoutFrontendUtils.getDefaultValueForSchema(itemSchema, { timeZone: itemTimeZone });
         append(defaultValue);
         afterArrayMutation();
-    }, [canAdd, disabled, isValidating, itemSchema, append, afterArrayMutation]);
+    }, [canAdd, disabled, isValidating, itemSchema, append, afterArrayMutation, itemTimeZone]);
     // Quick-add (validate-before-add): appends a PRE-BUILT, already-validated item
     // staged by ArrayQuickAddRow — unlike handleAdd, which appends a blank card. Same
     // post-mutation revalidation + whole-array autosave applies.
@@ -393,17 +417,50 @@ function AutomatedArrayFieldComponent({ name, schema, label, description, disabl
      */
     if (isEnumArray) {
         const multiValidationMode = fieldEditConfig?.validationMode ?? ValidationMode.ON_BLUR;
+        // An enum array narrowed by its operation's offer (#2744 review F4) shows only the offered values its enum allows.
+        const offeredEnumValues = !isRuntimeVocabularyArray && allowedValues !== undefined
+            ? getEnumValues(itemSchema).filter((value) => allowedValues.includes(value))
+            : undefined;
         const enumOptions = isRuntimeVocabularyArray
             ? allowedValues.map((value) => ({ value, label: enumLabels?.[value] ?? value }))
-            : enumLabels
-                ? getEnumValues(itemSchema).map((value) => ({ value, label: enumLabels[value] ?? value }))
-                : undefined;
-        return (_jsx(Controller, { name: name, control: control, shouldUnregister: true, render: ({ field, fieldState }) => (_jsx(FormFieldChrome, { mode: resolvedChromeMode, label: label, description: description, error: getFieldError(fieldState, formState.isSubmitted, multiValidationMode, tErrorValidation), labelPlacement: resolvedLabelPlacement, hideError: hideInlineErrorForPolicy, saveState: autosaveContext?.getFieldState(name), saveErrorMessage: autosaveContext?.getFieldStateInfo(name).lastError, onRetrySave: autosaveContext ? () => autosaveContext.retryFieldSave(name) : undefined, fieldName: name, disabled: disabled, className: className, children: _jsx(FormFieldEnum, { multiple: true, schema: schema, options: enumOptions, name: name, disabled: disabled, value: Array.isArray(field.value) ? field.value : [], onChange: (value) => {
+            : offeredEnumValues
+                ? offeredEnumValues.map((value) => ({ value, label: enumLabels?.[value] ?? value }))
+                : enumLabels
+                    ? getEnumValues(itemSchema).map((value) => ({ value, label: enumLabels[value] ?? value }))
+                    : undefined;
+        return (_jsx(Controller, { name: name, control: control, shouldUnregister: true, render: ({ field, fieldState }) => (_jsx(FormFieldChrome, { mode: resolvedChromeMode, label: label, description: description, error: getFieldError(fieldState, formState.isSubmitted, multiValidationMode, tErrorValidation), labelPlacement: resolvedLabelPlacement, hideError: hideInlineErrorForPolicy, saveState: autosaveContext?.getFieldState(name), saveErrorMessage: autosaveContext?.getFieldStateInfo(name).lastError, onRetrySave: autosaveContext ? () => autosaveContext.retryFieldSave(name) : undefined, onSaveFieldNow: saveListNow, fieldName: name, disabled: disabled, className: className, children: _jsx(FormFieldEnum, { multiple: true, schema: schema, options: enumOptions, name: name, disabled: disabled, value: Array.isArray(field.value) ? field.value : [], onChange: (value) => {
                         arrayFieldVisit.noteInputReceived();
                         field.onChange(value);
                         autosaveContext?.triggerSave(name, value, AutosaveTrigger.DEBOUNCE);
                     }, onBlur: () => { arrayFieldVisit.handleFieldBlur(field.onBlur); }, controlSize: resolvedControlSize }) })) }));
     }
+    /*
+     * A STRING ARRAY READ AS CHIPS IS EDITED AS CHIPS — one control, the edit twin of
+     * `ArrayListStyle.CHIPS`. Without this branch the same tags edited as one labelled input per item
+     * ("Item 1 *", "Item 2 *") with a trash button each: a form section for two words, and a value that
+     * looked nothing like what the read view had just shown.
+     *
+     * The same shape as the enum-array branch above, for the same reasons: one `Controller`, one
+     * `FormFieldChrome`, the WHOLE array autosaved on change. Each value is checked against the ELEMENT
+     * schema before it is added (`validateItem`), translated through the same catalog as a field error,
+     * so a tag that is too long is refused in the input rather than failing validation after it landed.
+     */
+    const isChipsArray = itemSchemaType === FieldSchemaType.STRING && getArrayUI(schema)?.display?.listStyle === ArrayListStyle.CHIPS;
+    if (isChipsArray) {
+        const chipsValidationMode = fieldEditConfig?.validationMode ?? ValidationMode.ON_BLUR;
+        const validateChip = (candidate) => {
+            const parsed = itemSchema.safeParse(candidate);
+            if (parsed.success)
+                return undefined;
+            const issue = parsed.error.issues[0];
+            return getFieldError({ isTouched: true, error: { type: issue?.code ?? 'custom', message: issue?.message, params: issue ? zodIssueParams(issue) : undefined } }, true, chipsValidationMode, tErrorValidation);
+        };
+        return (_jsx(Controller, { name: name, control: control, shouldUnregister: true, render: ({ field, fieldState }) => (_jsx(FormFieldChrome, { mode: resolvedChromeMode, label: label, description: description, error: getFieldError(fieldState, formState.isSubmitted, chipsValidationMode, tErrorValidation), labelPlacement: resolvedLabelPlacement, hideError: hideInlineErrorForPolicy, saveState: autosaveContext?.getFieldState(name), saveErrorMessage: autosaveContext?.getFieldStateInfo(name).lastError, onRetrySave: autosaveContext ? () => autosaveContext.retryFieldSave(name) : undefined, onSaveFieldNow: saveListNow, fieldName: name, disabled: disabled, className: className, children: _jsx(ChipsInput, { id: `field-${name}`, value: Array.isArray(field.value) ? field.value.filter((item) => typeof item === 'string') : [], onChange: (next) => {
+                        arrayFieldVisit.noteInputReceived();
+                        field.onChange(next);
+                        autosaveContext?.triggerSave(name, next, AutosaveTrigger.DEBOUNCE);
+                    }, onBlur: () => { arrayFieldVisit.handleFieldBlur(field.onBlur); }, validateItem: validateChip, maxItems: constraints.maxLength, disabled: disabled, invalid: !!fieldState.error, controlSize: resolvedControlSize }) })) }));
+    }
     // ── Whole-array autosave state (audit B1-render) ──
     // `afterArrayMutation` autosaves the WHOLE array under this field's key
     // (`triggerSave(name, arrayValue, DEBOUNCE)`), and `AutosaveContext.executeSave`
@@ -473,11 +530,21 @@ function AutomatedArrayFieldComponent({ name, schema, label, description, disabl
      * asked for a CARD or COLLAPSIBLE section (`sectionAppearance`) gets the section it asked for.
      */
     if (resolvedChromeMode === EditChromeMode.SETTINGS_ROW && sectionAppearance === undefined) {
-        return (_jsx(FormFieldChrome, { mode: EditChromeMode.SETTINGS_ROW, label: label, description: description, labelPlacement: resolvedLabelPlacement, fieldName: name, disabled: disabled, className: className, 
+        return (_jsx(FormFieldChrome, { mode: EditChromeMode.SETTINGS_ROW, label: label, description: description, labelPlacement: resolvedLabelPlacement, onSaveFieldNow: saveListNow, fieldName: name, disabled: disabled, className: className, 
             // The row is marked invalid like any other; the message itself stays inside the list, where
             // `listContent` already renders it, so the chrome must not print it a second time.
-            error: arrayError, hideError: true, wideControl: true, children: _jsxs("div", { id: `field-${name}`, role: "group", "aria-labelledby": label ? `field-${name}-label` : undefined, className: "flex flex-col", style: { rowGap: 'var(--spacing-element)' }, "data-testid": `field-array-${name}`, "aria-describedby": shouldShowArrayError ? `${name}-error` : undefined, children: [arrayAutosaveIndicator, listContent] }) }));
+            error: arrayError, hideError: true, hideLabel: hideLabel, wideControl: true, children: _jsxs("div", { id: `field-${name}`, role: "group", "aria-labelledby": label && !hideLabel ? `field-${name}-label` : undefined, "aria-label": label && hideLabel ? label : undefined, className: "flex flex-col", style: { rowGap: 'var(--spacing-element)' }, "data-testid": `field-array-${name}`, "aria-describedby": shouldShowArrayError ? `${name}-error` : undefined, children: [arrayAutosaveIndicator, listContent] }) }));
     }
+    /*
+     * A CARD or COLLAPSIBLE array hands its title and description to the section as STRUCTURED props, which is where
+     * those appearances place them: a card's title is the group heading above the card (naming the fieldset), and a
+     * collapsible's is its toggle. Passed as a child legend, a card showed it inside its body and lost its accessible
+     * name, and a collapsible's toggle had no title at all while the title folded away with the list. The autosave
+     * indicator holds a Retry button, so it never goes inside a collapsible's toggle (a button in a button); it leads
+     * the body instead.
+     */
+    const headsStructured = !hideLabel && (sectionAppearance === SectionMode.CARD || sectionAppearance === SectionMode.COLLAPSIBLE);
+    const indicatorInHeading = sectionAppearance !== SectionMode.COLLAPSIBLE;
     return (_jsxs(ContentSection
     // Arrays default to a QUIET, frameless GHOST section (legend + list, no
     // card border) — the framework baseline for "an array is just a labelled
@@ -490,7 +557,20 @@ function AutomatedArrayFieldComponent({ name, schema, label, description, disabl
         // list here". Callers opt into CARD / COLLAPSIBLE to containerize. Applied
         // at this consumer so EVERY array (wrapper-authored or a direct
         // FormField/DisplayField) shares the default, not only the wrappers.
-        appearance: sectionAppearance ?? SectionMode.GHOST, disabled: disabled, className: cn(className, arrayError && 'border-destructive'), "data-field": name, "data-testid": `field-array-${name}`, "aria-invalid": !!arrayError, "aria-describedby": shouldShowArrayError ? `${name}-error` : undefined, children: [_jsxs(ContentSectionLegend, { children: [label, arrayAutosaveIndicator] }), description && _jsx(ContentSectionDescription, { children: description }), listContent] }));
+        appearance: sectionAppearance ?? SectionMode.GHOST, legend: headsStructured ? _jsxs(_Fragment, { children: [label, indicatorInHeading && arrayAutosaveIndicator] }) : undefined, description: headsStructured ? description : undefined, disabled: disabled, className: cn(className, arrayError && 'border-destructive'), "data-field": name, "data-testid": `field-array-${name}`, "aria-invalid": !!arrayError, "aria-describedby": shouldShowArrayError ? `${name}-error` : undefined, children: [headsStructured ? (!indicatorInHeading && arrayAutosaveIndicator) : hideLabel ? (_jsxs(_Fragment, { children: [_jsx(FormFieldLegendVoice, { children: _jsx(ContentSectionLegend, { className: "sr-only", children: label }) }), arrayAutosaveIndicator] })) : (_jsx(FormFieldLegendVoice, { children: _jsxs(ContentSectionLegend, { children: [label, arrayAutosaveIndicator] }) })), !headsStructured && description && !hideLabel && _jsx(ContentSectionDescription, { children: description }), _jsx(BulkFieldClearSlot, { fieldName: name, label: label, disabled: disabled, onSaveFieldNow: saveListNow, children: listContent })] }));
+}
+/**
+ * Decides once whether this array autosaves, from its OWN field declaration, the way a scalar field decides
+ * (`resolveFieldAutosaveTrigger`), and provides the answer to the body and to the item templates it renders
+ * (`ArrayAutosavesContext`). The array used to save on every add, remove, move and item edit whenever an autosave
+ * provider was mounted, so in a form whose autosave is derived (only a field that declares it saves) the arrays saved
+ * while every undeclared scalar beside them waited for Save.
+ */
+function AutomatedArrayFieldComponent(props) {
+    const contextAutosave = useOptionalAutosave();
+    const arrayAutosaves = contextAutosave !== null
+        && resolveFieldAutosaveTrigger(getFieldUIEditConfig(props.schema)?.autosave, contextAutosave.config.defaultTrigger, true) !== AutosaveTrigger.NONE;
+    return (_jsx(ArrayAutosavesContext.Provider, { value: arrayAutosaves, children: _jsx(AutomatedArrayFieldBody, { ...props }) }));
 }
 AutomatedArrayFieldComponent.displayName = 'AutomatedArrayField';
 export const AutomatedArrayField = AutomatedArrayFieldComponent;