@evoke-platform/ui-components 1.10.0-dev.3 → 1.10.0-dev.31

package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js

@@ -221,7 +221,10 @@ const ValueEditor = (props) => {
                         })
                             .filter((item) => item !== '');
                         handleOnChange(uniqueSelections.length ? Array.from(new Set(uniqueSelections)) : '');
-                    }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
+                    }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, ...params, size: "small", inputProps: {
+                            ...params.inputProps,
+                            'aria-label': 'Select or enter a value',
+                        } })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: disabled || ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -240,11 +243,14 @@ const ValueEditor = (props) => {
             const options = [{ label: 'True', value: true }, { label: 'False', value: false }, ...presetValues];
             return (React.createElement(Autocomplete, { options: options, value: options.find((opt) => opt.value === value) ?? value, onChange: (event, newValue) => {
                     handleOnChange(newValue ? newValue.value : '');
-                }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+                }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, size: "small", ...params, inputProps: {
+                        'aria-label': 'Select or enter a value',
+                        ...params.inputProps,
+                    } })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
         }
         else {
-            const isMultiple = inputType === 'array' || isMultipleOperator || values?.length;
-            if (isMultiple) {
+            const isMultiple = inputType === 'array' || isMultipleOperator;
+            if (isMultiple || values?.length) {
                 const options = [...values, ...presetValues];
                 return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple
                         ? Array.isArray(value)
@@ -263,7 +269,11 @@ const ValueEditor = (props) => {
                         }
                         else {
                             value =
-                                typeof newValue === 'string' ? newValue : newValue.value;
+                                typeof newValue === 'string'
+                                    ? newValue
+                                    : !newValue
+                                        ? newValue
+                                        : newValue.value;
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
@@ -285,7 +295,10 @@ const ValueEditor = (props) => {
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), isOptionEqualToValue: (option, value) => option?.value === value.value, groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, ...params, size: "small", inputProps: {
+                            ...params.inputProps,
+                            'aria-label': 'Select or enter a value',
+                        } })), isOptionEqualToValue: (option, value) => typeof value === 'string' ? option?.value === value : option?.value === value.value, groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: styles.input, readOnly: readOnly }));

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -430,7 +430,7 @@ const RepeatableField = (props) => {
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (relatedInstances.find((i) => i.id === selectedRow) ?? {}) : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
+            objectInputCommonProps: { apiServices, setSnackbarError }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: property.relatedPropertyId }
                 : undefined, richTextEditor: richTextEditor })),

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -1,5 +1,4 @@
 import { ApiServices } from '@evoke-platform/context';
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import axios from 'axios';
@@ -10,7 +9,6 @@ import React from 'react';
 import { expect, it } from 'vitest';
 import Form from '../Common/Form';
 import { accessibility508Object, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, users, } from './test-data';
-expect.extend(matchers);
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
     portalSelectors.forEach((selector) => {

package/dist/published/components/custom/Form/utils.js

@@ -784,6 +784,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                     item.autoSave = autoSave;
                     item.apiServices = objectPropertyInputProps?.apiServices;
                     item.user = objectPropertyInputProps?.user;
+                    item.setSnackbarError = objectPropertyInputProps?.setSnackbarError;
                     item.defaultPages = defaultPages;
                     item.navigateTo = navigateTo;
                     item.allCriteriaInputs = allCriteriaInputs;

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -1,6 +1,7 @@
 import { DateTimeFormatter } from '@js-joda/core';
 import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
@@ -29,6 +30,7 @@ const asMonthDayYearFormat = (date) => {
 const DatePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, onChange, additionalProps, } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const { onAutosave } = useFormContext();
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
@@ -36,8 +38,19 @@ const DatePickerSelect = (props) => {
         setValue(date);
         onChange && onChange(property.id, date, property);
     };
+    const handleAccept = async () => {
+        // Trigger autosave when date is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+        React.createElement(DatePicker, { value: value, onChange: handleChange, onAccept: handleAccept, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.js

@@ -1,6 +1,7 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
 import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
@@ -30,6 +31,7 @@ const formatDateTime = (date) => {
 const DateTimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, additionalProps } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const { onAutosave } = useFormContext();
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
@@ -43,8 +45,19 @@ const DateTimePickerSelect = (props) => {
         setValue(date);
         props.onChange && props.onChange(property.id, date, property);
     };
+    const handleAccept = async () => {
+        // Trigger autosave when date/time is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+        React.createElement(DateTimePicker, { value: value, onChange: handleChange, onAccept: handleAccept, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.test.js

@@ -1,10 +1,8 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import InputField from './InputFieldComponent';
-expect.extend(matchers);
 describe('Free-text input', () => {
     // Right now an object property is required for this to function, but eventually this should go
     // away.

package/dist/published/components/custom/FormField/Select/Select.test.js

@@ -1,10 +1,8 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import Select from './Select';
-expect.extend(matchers);
 describe('Single select', () => {
     // Right now an object property is required for this to function, but eventually this should go
     // away.

package/dist/published/components/custom/FormField/TimePickerSelect/TimePickerSelect.js

@@ -3,11 +3,13 @@ import { TimePicker } from '@mui/x-date-pickers';
 import { isUndefined, omit, padStart } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
+    const { onAutosave } = useFormContext();
     const values = defaultValue ? defaultValue.split(':') : undefined;
     const hour = values ? parseInt(values[0]) : undefined;
     const minute = values ? parseInt(values[1]) : undefined;
@@ -41,11 +43,22 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
+    const handleAccept = async () => {
+        // Trigger autosave when time is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{
             ...props,
             defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
         } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
+        React.createElement(TimePicker, { value: value, onChange: handleChange, onAccept: handleAccept, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

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

@@ -16,7 +16,8 @@ export type FormRendererProps = BaseProps & {
     form: EvokeForm;
     title?: string | React.ReactNode;
     instance?: ObjectInstance | Document;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     associatedObject?: {
         instanceId?: string;
         propertyId?: string;

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

@@ -1,6 +1,6 @@
 import { useObject } from '@evoke-platform/context';
 import { isEmpty, isEqual, omit } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
@@ -12,7 +12,7 @@ import { assignIdsToSectionsAndRichText, convertDocToParameters, convertProperti
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -32,6 +32,7 @@ const FormRendererInternal = (props) => {
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
     const objectStore = useObject(objectId);
+    const validationContainerRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
             ...prev,
@@ -45,7 +46,7 @@ const FormRendererInternal = (props) => {
         setExpandAll(false);
     }
     const updatedEntries = useMemo(() => {
-        return assignIdsToSectionsAndRichText(entries, object, parameters);
+        return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
     }, [entries, object, parameters]);
     useEffect(() => {
         (async () => {
@@ -108,7 +109,7 @@ const FormRendererInternal = (props) => {
                     }
                 });
             }
-            if (!entryIsVisible(entry, getValues(), instance)) {
+            if (!entryIsVisible(entry, instance, getValues())) {
                 if (entry.type === 'sections' || entry.type === 'columns') {
                     const fieldsToUnregister = getNestedParameterIds(entry);
                     fieldsToUnregister.forEach(processFieldUnregister);
@@ -134,9 +135,17 @@ const FormRendererInternal = (props) => {
             unregister(fieldId);
         }
     };
+    const onSubmitError = (errors) => {
+        if (onSubmitErrorOverride) {
+            onSubmitErrorOverride(errors);
+        }
+        else if (validationContainerRef.current) {
+            validationContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
-        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError?.(errors))();
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,
@@ -146,8 +155,9 @@ const FormRendererInternal = (props) => {
         errors,
         hasAccordions: hasSections && isSmallerThanMd,
         shouldShowValidationErrors: isSubmitted,
-        form,
         action,
+        validationContainerRef: validationContainerRef,
+        autosaveEnabled: !!form.autosaveActionId,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,
@@ -155,6 +165,7 @@ const FormRendererInternal = (props) => {
         action,
         discardChangesButtonLabel: 'Discard Changes',
         submitButtonLabel: display?.submitLabel ?? 'Submit',
+        disableDiscardChanges: !!form?.autosaveActionId,
     };
     return (React.createElement(Box, { ref: containerRef },
         React.createElement(FormContext.Provider, { value: {
@@ -172,6 +183,7 @@ const FormRendererInternal = (props) => {
                 parameters,
                 fieldHeight,
                 handleChange: onChange,
+                onAutosave,
                 triggerFieldReset,
                 showSubmitError: isSubmitted,
                 associatedObject,
@@ -200,7 +212,7 @@ const FormRendererInternal = (props) => {
                         expandedSections,
                         hasAccordions: hasSections && isSmallerThanMd,
                     } })),
-                (actionId || form.id === 'documentForm') &&
+                (action || form.id === 'documentForm') &&
                     onSubmit &&
                     (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };