@evoke-platform/ui-components 1.10.0-testing.9 → 1.10.0

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -7,15 +7,14 @@ import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Autocomplete, Button, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
-import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+import { getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
-    const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
-    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, instance, } = useFormContext();
+    const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, relatedObjectId, } = props;
+    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
-    const [allDefaultPages, setAllDefaultPages] = useState(defaultPages ?? {});
     const [loadingOptions, setLoadingOptions] = useState(false);
     const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${id}NavigationSlug`]);
     const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${id}RelatedObject`]);
@@ -24,7 +23,6 @@ const ObjectPropertyInput = (props) => {
     const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
     const [layout, setLayout] = useState();
-    const [appId, setAppId] = useState(fetchedOptions[`${id}AppId`]);
     const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
@@ -90,20 +88,33 @@ const ObjectPropertyInput = (props) => {
             });
             if (updatedFilter.where) {
                 setLoadingOptions(true);
-                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), (error, instances) => {
+                apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
                     if (error) {
                         console.error(error);
                         setLoadingOptions(false);
                     }
                     if (instances && instances.length > 0) {
                         setSelectedInstance(instances[0]);
-                        handleChangeObjectField(id, instances[0]);
+                        try {
+                            handleChangeObjectField && (await handleChangeObjectField(id, instances[0]));
+                        }
+                        catch (error) {
+                            console.error('Failed to update field:', error);
+                            setLoadingOptions(false);
+                            return;
+                        }
+                        try {
+                            await onAutosave?.(id);
+                        }
+                        catch (error) {
+                            console.error('Autosave failed:', error);
+                        }
                     }
                     setLoadingOptions(false);
                 });
             }
         }
-    }, [fieldDefinition, defaultValueCriteria, sortBy, orderBy]);
+    }, [relatedObjectId, defaultValueCriteria, sortBy, orderBy]);
     const getDropdownOptions = useCallback(() => {
         if (((!fetchedOptions?.[`${id}Options`] ||
             (fetchedOptions?.[`${id}Options`]).length === 0) &&
@@ -118,7 +129,7 @@ const ObjectPropertyInput = (props) => {
                 direction: 'asc',
             };
             updatedFilter.order = `${propertyId} ${direction}`;
-            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
+            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
                 if (error) {
                     console.error(error);
                     setLoadingOptions(false);
@@ -131,7 +142,15 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [fieldDefinition, updatedCriteria, layout, fetchedOptions, hasFetched, id]);
+    }, [
+        relatedObjectId,
+        updatedCriteria,
+        layout,
+        fetchedOptions?.[`${id}Options`],
+        fetchedOptions?.[`${id}UpdatedCriteria`],
+        hasFetched,
+        id,
+    ]);
     const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [getDropdownOptions]);
     useEffect(() => {
         if (displayOption === 'dropdown') {
@@ -143,41 +162,31 @@ const ObjectPropertyInput = (props) => {
         setSelectedInstance(initialValue);
     }, [initialValue]);
     useEffect(() => {
-        if (formId || action?.defaultFormId) {
-            apiServices
-                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
-                .then((evokeForm) => {
-                setForm(evokeForm);
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
-        else if (action) {
-            apiServices
-                .get(getPrefixedUrl('/forms'), {
-                params: {
-                    filter: {
-                        where: {
-                            actionId: action.id,
-                            objectId: fieldDefinition.objectId,
-                        },
-                    },
-                },
-            })
-                .then((matchingForms) => {
-                if (matchingForms.length === 1) {
-                    setForm(matchingForms[0]);
+        // Early return if already fetched
+        if (fetchedOptions[`${id}Form`])
+            return;
+        const fetchForm = async () => {
+            try {
+                let evokeForm;
+                if (formId || action?.defaultFormId) {
+                    evokeForm = await apiServices.get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`));
                 }
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
-    }, [action, formId]);
+                if (evokeForm) {
+                    setForm(evokeForm);
+                    setFetchedOptions({
+                        [`${id}Form`]: evokeForm,
+                    });
+                }
+            }
+            catch (error) {
+                console.error('Error fetching form:', error);
+            }
+        };
+        fetchForm();
+    }, [action, formId, id, apiServices, fetchedOptions]);
     useEffect(() => {
         if (!fetchedOptions[`${id}RelatedObject`]) {
-            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
+            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/effective?sanitizedVersion=true`), (error, object) => {
                 if (error) {
                     console.error(error);
                 }
@@ -186,33 +195,26 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [fieldDefinition.objectId, fetchedOptions, id]);
+    }, [relatedObjectId, fetchedOptions, id]);
     useEffect(() => {
-        const fetchDefaultPages = async () => {
-            if (parameters && !fetchedOptions['allDefaultPages']) {
+        (async () => {
+            if (parameters && fetchedOptions[`${id}NavigationSlug`] === undefined) {
                 const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
-                setAllDefaultPages(pages);
-                setFetchedOptions({ [`allDefaultPages`]: pages });
-            }
-        };
-        fetchDefaultPages();
-    }, [fetchedOptions, parameters, defaultPages, findDefaultPageSlugFor]);
-    useEffect(() => {
-        if (fieldDefinition.objectId &&
-            allDefaultPages &&
-            allDefaultPages[fieldDefinition.objectId] &&
-            (!fetchedOptions?.[`${id}NavigationSlug`] || !fetchedOptions[`${id}AppId`])) {
-            apiServices.get(getPrefixedUrl(`/apps/${allDefaultPages[fieldDefinition.objectId].split('/').slice(1, 2)}/pages/${encodePageSlug(allDefaultPages[fieldDefinition.objectId].split('/').slice(2).join('/'))}`), (error, page) => {
-                if (error) {
-                    console.error(error);
+                if (relatedObjectId && pages[relatedObjectId]) {
+                    setNavigationSlug(pages[relatedObjectId]);
+                    setFetchedOptions({
+                        [`${id}NavigationSlug`]: pages[relatedObjectId],
+                    });
                 }
                 else {
-                    setAppId(page?.appId);
-                    setNavigationSlug(page?.slug);
+                    // setting the nav slug to null if there is no default page for this object to avoid re-fetching
+                    setFetchedOptions({
+                        [`${id}NavigationSlug`]: null,
+                    });
                 }
-            });
-        }
-    }, [fieldDefinition, allDefaultPages, fetchedOptions, id]);
+            }
+        })();
+    }, [parameters, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -240,12 +242,7 @@ const ObjectPropertyInput = (props) => {
                 [`${id}NavigationSlug`]: navigationSlug,
             });
         }
-        if (appId && !fetchedOptions[`${id}AppId`]) {
-            setFetchedOptions({
-                [`${id}AppId`]: appId,
-            });
-        }
-    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, appId, id]);
+    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, id]);
     const dropdownOptions = [
         ...options.map((o) => ({ label: o.name, value: o.id })),
         ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
@@ -383,19 +380,38 @@ const ObjectPropertyInput = (props) => {
                     if (selectedInstance?.id) {
                         e.preventDefault();
                     }
-                }, loading: loadingOptions, onChange: (event, value) => {
-                    if (isNil(value)) {
-                        setDropdownInput(undefined);
-                        setSelectedInstance(undefined);
-                        handleChangeObjectField(id, null);
-                    }
-                    else if (value?.value === '__new__') {
-                        setOpenCreateDialog(true);
+                }, loading: loadingOptions, onChange: async (event, value) => {
+                    try {
+                        if (isNil(value)) {
+                            setDropdownInput(undefined);
+                            setSelectedInstance(undefined);
+                            handleChangeObjectField && (await handleChangeObjectField(id, null));
+                            // Trigger autosave immediately upon clearing
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
+                        }
+                        else if (value?.value === '__new__') {
+                            setOpenCreateDialog(true);
+                        }
+                        else {
+                            const selectedInstance = options.find((o) => o.id === value?.value);
+                            setSelectedInstance(selectedInstance);
+                            handleChangeObjectField && (await handleChangeObjectField(id, selectedInstance));
+                            // Trigger autosave immediately upon selection
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
+                        }
                     }
-                    else {
-                        const selectedInstance = options.find((o) => o.id === value?.value);
-                        setSelectedInstance(selectedInstance);
-                        handleChangeObjectField(id, selectedInstance);
+                    catch (error) {
+                        console.error('Failed to update field:', error);
                     }
                 }, selectOnFocus: false, onBlur: () => {
                     if (dropdownInput) {
@@ -434,7 +450,7 @@ const ObjectPropertyInput = (props) => {
                         ...params.InputProps,
                         startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: () => {
                                 if (navigationSlug && selectedInstance?.id) {
-                                    navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
+                                    navigateTo(`/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
                                 }
                             }, sx: {
                                 cursor: navigationSlug ? 'pointer' : 'default',
@@ -464,13 +480,25 @@ const ObjectPropertyInput = (props) => {
                             ? '#999'
                             : '#212B36',
                 }, variant: "body2", href: navigationSlug && !isModal
-                    ? `${'/app'}/${appId}/${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
+                    ? `${'/app'}${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
                     : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
             !readOnly && selectedInstance ? (React.createElement(Tooltip, { title: `Unlink` },
                 React.createElement("span", null,
-                    React.createElement(IconButton, { onClick: (event) => {
+                    React.createElement(IconButton, { onClick: async (event) => {
                             event.stopPropagation();
-                            handleChangeObjectField(id, null);
+                            try {
+                                handleChangeObjectField && (await handleChangeObjectField(id, null));
+                            }
+                            catch (error) {
+                                console.error('Failed to update field:', error);
+                                return;
+                            }
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
                             setSelectedInstance(undefined);
                         }, sx: { p: 0, marginBottom: '4px' }, "aria-label": `Unlink` },
                         React.createElement(Close, { sx: { width: '20px', height: '20px' } }))))) : (React.createElement(Button, { sx: {
@@ -494,7 +522,7 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition }),
+        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts

@@ -1,11 +1,11 @@
-import { InputParameter, Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
+import { Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
 import React from 'react';
 import { BaseProps } from '../../types';
 export type RelatedObjectInstanceProps = BaseProps & {
     id: string;
     open: boolean;
     title: string;
-    relatedObject: Obj | undefined;
+    relatedObject?: Obj;
     setSelectedInstance: (selectedInstance: ObjectInstance) => void;
     handleClose: () => void;
     mode: 'default' | 'existingOnly' | 'newOnly';
@@ -21,7 +21,6 @@ export type RelatedObjectInstanceProps = BaseProps & {
     layout?: TableViewLayout;
     formId?: string;
     actionId?: string;
-    fieldDefinition: InputParameter;
 };
 declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => React.JSX.Element;
 export default RelatedObjectInstance;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js

@@ -6,6 +6,7 @@ import { Close } from '../../../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
 import { Button, Dialog, DialogContent, DialogTitle, FormControlLabel, IconButton, Radio, RadioGroup, } from '../../../../../core';
 import Box from '../../../../../layout/Box/Box';
+import ErrorComponent from '../../../../ErrorComponent';
 import FormRenderer from '../../../FormRenderer';
 import FormRendererContainer from '../../../FormRendererContainer';
 import Body from '../../Body';
@@ -28,8 +29,8 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
-    const { handleChange: handleChangeObjectField, richTextEditor, fieldHeight, width } = useFormContext();
+    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, setOptions, options, } = props;
+    const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
     const apiServices = useApiServices();
@@ -40,9 +41,22 @@ const RelatedObjectInstance = (props) => {
     });
     const { isXs, isSm } = breakpoints;
     const linkExistingInstance = async () => {
-        if (selectedRow) {
+        if (selectedRow && handleChangeObjectField) {
             setSelectedInstance(selectedRow);
-            handleChangeObjectField(id, selectedRow);
+            try {
+                await handleChangeObjectField(id, selectedRow);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                onClose();
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
         onClose();
     };
@@ -56,22 +70,31 @@ const RelatedObjectInstance = (props) => {
         }
         submission = await formatSubmission(submission, apiServices, relatedObject.id);
         try {
-            await apiServices
-                .post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
+            const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
                 actionId: actionId,
                 input: submission,
-            })
-                .then((response) => {
-                handleChangeObjectField(id, response);
-                setSelectedInstance(response);
-                setSnackbarError({
-                    showAlert: true,
-                    message: 'New instance created',
-                    isError: false,
-                });
-                setOptions(options.concat([response]));
-                onClose();
             });
+            try {
+                handleChangeObjectField && (await handleChangeObjectField(id, response));
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+            setSelectedInstance(response);
+            setSnackbarError({
+                showAlert: true,
+                message: 'New instance created',
+                isError: false,
+            });
+            setOptions(options.concat([response]));
+            onClose();
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
         catch (err) {
@@ -98,7 +121,7 @@ const RelatedObjectInstance = (props) => {
         }, value: relationType },
         React.createElement(FormControlLabel, { value: "existing", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "Existing" }),
         React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null;
-    const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: fieldDefinition.objectId, onSubmit: createNewInstance, onDiscardChanges: onClose, onSubmitError: handleSubmitError, richTextEditor: richTextEditor, renderHeader: () => null, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: styles.dialogContent },
+    const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: relatedObject.id, onSubmit: createNewInstance, onDiscardChanges: onClose, onSubmitError: handleSubmitError, richTextEditor: richTextEditor, renderHeader: () => null, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: styles.dialogContent },
             relationType === 'new' ? (React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(FormRenderer.ValidationErrors, { errors: bodyProps.errors, sx: {
                     my: isSm || isXs ? 2 : 3,
                 } })) : null)) : null,
@@ -114,7 +137,7 @@ const RelatedObjectInstance = (props) => {
                     React.createElement(RadioButtons, null),
                     defaultContainer)),
                 status === 'ready' && defaultContainer));
-        }, sx: { border: 'none' } })), [formId, actionId, fieldDefinition, fieldHeight, richTextEditor, RadioButtons]);
+        }, sx: { border: 'none' } })), [formId, actionId, relatedObject, fieldHeight, richTextEditor, RadioButtons]);
     return (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: open, onClose: (e, reason) => reason !== 'backdropClick' && handleClose(), sx: {
             background: 'none',
         }, PaperProps: {
@@ -137,7 +160,7 @@ const RelatedObjectInstance = (props) => {
                 title,
                 React.createElement(IconButton, { onClick: onClose, "aria-label": "Close" },
                     React.createElement(Close, { fontSize: "small" })))),
-        relationType === 'new' ? (React.createElement(DialogForm, null)) : ((mode === 'default' || mode === 'existingOnly') &&
+        relationType === 'new' ? (relatedObject ? (React.createElement(DialogForm, null)) : (React.createElement(ErrorComponent, { code: "Misconfigured" }))) : ((mode === 'default' || mode === 'existingOnly') &&
             relatedObject && (React.createElement(React.Fragment, null,
             React.createElement(DialogContent, { sx: styles.dialogContent },
                 shouldShowRadioButtons && React.createElement(RadioButtons, null),

package/dist/published/components/custom/FormV2/components/Header.d.ts

@@ -1,19 +1,21 @@
-import { Action, EvokeForm } from '@evoke-platform/context';
+import { Action } from '@evoke-platform/context';
 import { SxProps } from '@mui/material';
 import React from 'react';
 import { FieldErrors } from 'react-hook-form';
 import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
-    shouldShowValidationErrors: boolean;
+    shouldShowValidationErrors?: boolean;
+    validationContainerRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;
     onCollapseAll?: () => void;
-    form: EvokeForm;
     errors?: FieldErrors;
     action?: Action;
+    autosaving?: boolean;
     sx?: SxProps;
+    autosaveEnabled?: boolean;
 };
 declare const Header: React.FC<HeaderProps>;
 export type TitleProps = {

package/dist/published/components/custom/FormV2/components/Header.js

@@ -1,12 +1,13 @@
 import { isEmpty } from 'lodash';
 import React from 'react';
+import { Autorenew } from '../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import Button from '../../../core/Button/Button';
 import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, form, sx } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationContainerRef, sx, autosaveEnabled } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -14,6 +15,8 @@ const Header = (props) => {
     });
     const isSmallerThanMd = isBelow('md');
     const { isXs, isSm } = breakpoints;
+    const isSmall = isSm || isXs;
+    const displayValidationErrors = shouldShowValidationErrors && !isEmpty(errors);
     return (React.createElement(Box, { sx: {
             paddingX: isSmallerThanMd ? 2 : 3,
             paddingTop: '0px',
@@ -21,16 +24,25 @@ const Header = (props) => {
             alignItems: 'center',
             flexWrap: 'wrap',
             paddingY: isSm || isXs ? 2 : 3,
-            // when rendering the default delete action, we don't want a border
-            borderBottom: !form.id ? undefined : '1px solid #e9ecef',
+            borderBottom: '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
-        } },
-        title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
-            React.createElement(Title, { ...props }))),
-        hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
-            React.createElement(AccordionActions, { ...props }))),
-        shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null));
+        }, ref: validationContainerRef },
+        title && (React.createElement(Box, { sx: { flex: '1 1 auto', minWidth: 0, display: 'flex', alignItems: 'center', gap: 1 } },
+            React.createElement(Title, { ...props }),
+            props.autosaving && !isSmall && React.createElement(SavingIndicator, null))),
+        hasAccordions && (React.createElement(Box, { sx: { flex: '0 0 auto', display: 'flex', alignItems: 'center' } },
+            React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
+                React.createElement(AccordionActions, { ...props })),
+            autosaveEnabled && (React.createElement(Box, { sx: {
+                    width: '96px',
+                    minWidth: '72px',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    marginLeft: 0.5,
+                } }, props.autosaving && isSmall ? React.createElement(SavingIndicator, null) : React.createElement(Box, { sx: { width: '100%' } }))))),
+        displayValidationErrors ? React.createElement(ValidationErrors, { errors: errors }) : null));
 };
 // Default slot components for convenience
 export const Title = ({ title }) => (React.createElement(Typography, { sx: {
@@ -60,4 +72,30 @@ export const AccordionActions = ({ onExpandAll, onCollapseAll, expandedSections
                 fontSize: '14px',
             } }, "Collapse all")));
 };
+/**
+ * SavingIndicator displays a spinning icon with "Saving" text
+ * to indicate that an autosave operation is in progress.
+ */
+const SavingIndicator = () => (React.createElement(Box, { sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+    } },
+    React.createElement(Typography, { sx: {
+            fontSize: '14px',
+            color: 'text.secondary',
+        } }, "Saving"),
+    React.createElement(Autorenew, { sx: {
+            fontSize: '16px',
+            color: 'text.secondary',
+            animation: 'spin 1s linear infinite',
+            '@keyframes spin': {
+                '0%': {
+                    transform: 'rotate(0deg)',
+                },
+                '100%': {
+                    transform: 'rotate(360deg)',
+                },
+            },
+        } })));
 export default Header;

package/dist/published/components/custom/FormV2/components/PropertyProtection.d.ts

@@ -0,0 +1,16 @@
+import { PropertyProtection as PropertyProtectionType } from '@evoke-platform/context';
+import React from 'react';
+import { ObjectProperty } from '../../../../types';
+type PropertyProtectionProps = {
+    parameter: ObjectProperty;
+    protection?: PropertyProtectionType;
+    mask?: string;
+    canEdit: boolean;
+    value: unknown;
+    handleChange?: (value: unknown) => void;
+    setCurrentDisplayValue: (value: unknown) => void;
+    mode: 'mask' | 'full' | 'edit';
+    setMode: (mode: 'mask' | 'full' | 'edit') => void;
+};
+declare const PropertyProtection: React.FC<PropertyProtectionProps>;
+export default PropertyProtection;