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

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/FormField.d.ts

@@ -1,4 +1,4 @@
-import { SelectOption } from '@evoke-platform/context';
+import { PropertyProtection as PropertyProtectionType, SelectOption } from '@evoke-platform/context';
 import React, { FocusEventHandler, ReactNode } from 'react';
 import { ObjectProperty } from '../../../types';
 import { AutocompleteOption } from '../../core';
@@ -36,6 +36,8 @@ export type FormFieldProps = {
     description?: string;
     tooltip?: string;
     isCombobox?: boolean;
+    endAdornment?: ReactNode;
+    protection?: PropertyProtectionType;
 };
 declare const FormField: (props: FormFieldProps) => React.JSX.Element;
 export default FormField;

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import PropertyProtection from '../FormV2/components/PropertyProtection';
 import AddressFieldComponent from './AddressFieldComponent/addressFieldComponent';
 import BooleanSelect from './BooleanSelect/BooleanSelect';
 import DatePickerSelect from './DatePickerSelect/DatePickerSelect';
@@ -8,8 +9,16 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 const FormField = (props) => {
-    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, isCombobox, } = props;
-    let control;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, isCombobox, protection, } = props;
+    const [currentDisplayValue, setCurrentDisplayValue] = useState(defaultValue);
+    const isProtectedProperty = !!protection?.maskChar;
+    const [protectionMode, setProtectionMode] = useState(isProtectedProperty ? (!currentDisplayValue ? 'edit' : 'mask') : 'full');
+    useEffect(() => {
+        if (isProtectedProperty && protectionMode === 'edit') {
+            setCurrentDisplayValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const protectionComponent = isProtectedProperty && !!defaultValue ? (React.createElement(PropertyProtection, { parameter: property, protection: protection, mask: mask, canEdit: !readOnly, value: defaultValue, handleChange: (value) => onChange?.(property.id, value, property), setCurrentDisplayValue: setCurrentDisplayValue, mode: protectionMode, setMode: setProtectionMode })) : null;
     const commonProps = {
         id: id ?? property.id,
         property,
@@ -17,8 +26,8 @@ const FormField = (props) => {
         onBlur,
         error,
         errorMessage,
-        readOnly,
-        defaultValue,
+        readOnly: readOnly || (!!isProtectedProperty && protectionMode !== 'edit'),
+        defaultValue: isProtectedProperty ? currentDisplayValue : defaultValue,
         selectOptions,
         required,
         strictlyTrue,
@@ -37,7 +46,10 @@ const FormField = (props) => {
         description,
         tooltip,
         isCombobox,
+        endAdornment: protectionComponent,
+        protection,
     };
+    let control;
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));
         return control;

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

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
 import NumberFormat from 'react-number-format';
 import { Autocomplete, TextField } from '../../../core';
+import { obfuscateValue } from '../../FormV2/components/utils';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const NumericFormat = (props) => {
     const { inputRef, onChange, defaultValue, ...other } = props;
@@ -15,7 +16,7 @@ export const NumericFormat = (props) => {
         }, isNumericString: true, fixedDecimalScale: true, allowNegative: true }));
 };
 const InputFieldComponent = (props) => {
-    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, additionalProps, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, additionalProps, endAdornment, protection, } = props;
     const [value, setValue] = useState(defaultValue ?? '');
     const [inputValue, setInputValue] = useState('');
     useEffect(() => {
@@ -43,6 +44,7 @@ const InputFieldComponent = (props) => {
         : property.type === 'integer'
             ? { inputProps: { min, max, ...(additionalProps?.inputProps ?? {}) } }
             : null;
+    const isValueProtected = protection?.maskChar && defaultValue === obfuscateValue(defaultValue, { protection, mask });
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
         // note: this is different between widgets and builder
         // builder had select options being {label, value}
@@ -53,7 +55,7 @@ const InputFieldComponent = (props) => {
             ? [...property.enum, defaultValue]
             : property.enum, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
-        }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask ? (React.createElement(TextField, { id: id, sx: {
+        }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask || isValueProtected ? (React.createElement(TextField, { id: id, sx: {
             background: 'white',
             borderRadius: '8px',
             ...(readOnly && {
@@ -65,7 +67,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
-        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, endAdornment, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
@@ -75,7 +77,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...InputProps, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })
+            : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { ...InputProps, endAdornment, readOnly: readOnly }, fullWidth: true, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })
     // Casting to `React.ReactNode` is necessary to resolve TypeScript errors
     // due to compatibility issues with the outdated `react-input-mask` version
     // and the newer `@types/react` package.

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';
@@ -8,11 +8,11 @@ import { Body } from './components/Body';
 import { Footer, FooterActions } from './components/Footer';
 import { FormContext } from './components/FormContext';
 import Header, { AccordionActions, Title } from './components/Header';
-import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, } from './components/utils';
+import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, obfuscateValue, } from './components/utils';
 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 () => {
@@ -78,6 +79,15 @@ const FormRendererInternal = (props) => {
         if (value) {
             for (const key of Object.keys(currentValues)) {
                 if (!isEqual(currentValues[key], value[key])) {
+                    // For protected properties, don't validate initial obfuscated value
+                    const property = object?.properties?.find((prop) => prop.id === key);
+                    const isProtectedProperty = property?.protection?.maskChar;
+                    if (isProtectedProperty) {
+                        if (value[key] === obfuscateValue(value[key], property)) {
+                            setValue(key, value[key], { shouldValidate: false });
+                            continue;
+                        }
+                    }
                     setValue(key, value[key], { shouldValidate: true });
                 }
             }
@@ -108,7 +118,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);
@@ -121,6 +131,22 @@ const FormRendererInternal = (props) => {
             }
         });
     };
+    const removeUneditedProtectedValues = () => {
+        const protectedProperties = object?.properties?.filter((prop) => prop.protection?.maskChar);
+        if (!protectedProperties || protectedProperties.length === 0) {
+            return;
+        }
+        protectedProperties.forEach((property) => {
+            const fieldId = property.id;
+            const originalValue = instance?.[fieldId];
+            const value = getValues(fieldId);
+            // When protected value hasn't been edited or viewed, unregister to
+            // avoid saving the obfuscated value.
+            if (value === originalValue) {
+                processFieldUnregister(fieldId);
+            }
+        });
+    };
     const processFieldUnregister = (fieldId) => {
         if (isAddressProperty(fieldId)) {
             // Unregister entire addressObject to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
@@ -134,9 +160,18 @@ 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))();
+        removeUneditedProtectedValues();
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,
@@ -146,8 +181,9 @@ const FormRendererInternal = (props) => {
         errors,
         hasAccordions: hasSections && isSmallerThanMd,
         shouldShowValidationErrors: isSubmitted,
-        form,
         action,
+        validationContainerRef: validationContainerRef,
+        autosaveEnabled: !!form.autosaveActionId,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,
@@ -155,6 +191,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 +209,7 @@ const FormRendererInternal = (props) => {
                 parameters,
                 fieldHeight,
                 handleChange: onChange,
+                onAutosave,
                 triggerFieldReset,
                 showSubmitError: isSubmitted,
                 associatedObject,
@@ -200,7 +238,7 @@ const FormRendererInternal = (props) => {
                         expandedSections,
                         hasAccordions: hasSections && isSmallerThanMd,
                     } })),
-                (actionId || form.id === 'documentForm') &&
+                (action || form.id === 'documentForm') &&
                     onSubmit &&
                     (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };