@evoke-platform/ui-components 1.10.1-dev.6 → 1.11.0-dev.1

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

@@ -6,6 +6,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import '../../../../styles/form-component.css';
 import { Skeleton, Snackbar } from '../../../core';
 import { Box } from '../../../layout';
+import { obfuscateValue } from '../../FormV2/components/utils';
 import { ButtonComponent, DocumentComponent, FormFieldComponent, ImageComponent, ObjectComponent, RepeatableFieldComponent, UserComponent, ViewOnlyComponent, } from '../FormComponents';
 import { CriteriaComponent } from '../FormComponents/CriteriaComponent/CriteriaComponent';
 import { addObjectPropertiesToComponentProps, buildComponentPropsFromDocumentProperties, buildComponentPropsFromObjectProperties, containsCorruptedFiles, convertFormToComponents, flattenFormComponents, getAllCriteriaInputs, getFlattenEntries, getPrefixedUrl, isCorruptedFile, } from '../utils';
@@ -353,11 +354,19 @@ export function Form(props) {
         const submittedFields = {};
         for (const field in submission.data) {
             const value = submission.data[field];
+            const protectedProperties = object?.properties?.filter((prop) => prop.protection?.maskChar);
             if (value === '' ||
                 (Array.isArray(value) && !value.length) ||
                 (typeof value === 'object' && isEmpty(value))) {
                 submittedFields[field] = null;
             }
+            else if (protectedProperties?.some((prop) => prop.id === field)) {
+                // When protected value hasn't been edited or viewed, don't
+                // save the obfuscated value.
+                const protectedProperty = protectedProperties.find((prop) => prop.id === field);
+                const isProtectedValue = value === obfuscateValue(value, protectedProperty);
+                submittedFields[field] = isProtectedValue ? undefined : value;
+            }
             else {
                 if (isObject(value) && 'id' in value && 'name' in value) {
                     submittedFields[field] = pick(value, 'id', 'name');

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.js

@@ -5,6 +5,7 @@ import Handlebars from 'no-eval-handlebars';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormField } from '../../../custom';
+import { obfuscateValue } from '../../FormV2/components/utils';
 import { FormComponentWrapper } from '../Common';
 import { isPropertyVisible } from '../utils';
 function isAddressProperties(key) {
@@ -290,6 +291,15 @@ export class FormFieldComponent extends ReactComponent {
         if (!isPropertyVisible(this.component.conditional, this.root.data)) {
             return;
         }
+        // When protected value hasn't been edited or viewed, don't validate
+        // the obfuscated value
+        if (this.component.property.protection) {
+            const obfuscatedValue = obfuscateValue(value, this.component.property);
+            if (obfuscatedValue === value) {
+                delete this.errorDetails['rootError'];
+                return;
+            }
+        }
         const emptyMask = this.component.inputMaskPlaceholderChar &&
             this.component.inputMask
                 ?.replaceAll('9', this.component.inputMaskPlaceholderChar)
@@ -490,6 +500,6 @@ export class FormFieldComponent extends ReactComponent {
                             falsePositiveMaskError &&
                             isEmpty(this.errorDetails) &&
                             this.emit('changed-' + this.component.key, e.target.value);
-                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined, isCombobox: this.component.nonStrictEnum }))), root);
+                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined, isCombobox: this.component.nonStrictEnum, protection: this.component.property.protection }))), root);
     }
 }

package/dist/published/components/custom/Form/FormComponents/ViewOnlyComponent.js

@@ -1,10 +1,12 @@
 import { ReactComponent } from '@formio/react';
 import { get, isEmpty } from 'lodash';
 import { DateTime } from 'luxon';
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+import { Box } from '../../../..';
 import { Link, Typography } from '../../../core';
 import BooleanSelect from '../../FormField/BooleanSelect/BooleanSelect';
+import PropertyProtection from '../../FormV2/components/PropertyProtection';
 import { FormComponentWrapper } from '../Common/FormComponentWrapper';
 export class ViewOnlyComponent extends ReactComponent {
     /**
@@ -26,8 +28,9 @@ export class ViewOnlyComponent extends ReactComponent {
         this.showValue = this.showValue.bind(this);
     }
     showValue(value) {
-        if ((value === null || value === undefined) && this.component.type !== 'ViewOnlyBoolean')
+        if ((value === null || value === undefined) && this.component.type !== 'ViewOnlyBoolean') {
             return React.createElement("span", null, "\u00A0");
+        }
         switch (this.component.type) {
             case 'ViewOnlyObject':
                 if (this.component.defaultPages && this.component.property.objectId) {
@@ -76,13 +79,36 @@ export class ViewOnlyComponent extends ReactComponent {
         if (!root) {
             root = element;
         }
+        const value = this.component.instance
+            ? get(this.component.instance, this.component.key)
+            : this.component.defaultValue;
         /* TODO: You'll see warnings to upgrade to React 18's createRoot();
          * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
          * Will need to be revisited later. Possibly look into using this.ref */
         return ReactDOM.render(React.createElement("div", null,
-            React.createElement(FormComponentWrapper, { ...this.component, viewOnly: true },
-                React.createElement(Typography, { variant: "body1", key: this.component.key }, this.showValue(this.component.instance
-                    ? get(this.component.instance, this.component.key)
-                    : this.component.defaultValue)))), root);
+            React.createElement(FormComponentWrapper, { ...this.component, viewOnly: true }, this.component.property?.protection ? (React.createElement(ProtectedValue, { property: this.component.property, value: value, instance: this.component.instance, apiServices: this.component.apiServices })) : (React.createElement(Typography, { variant: "body1", key: this.component.key }, this.showValue(value))))), root);
     }
 }
+const ProtectedValue = (props) => {
+    const { property, value, instance, apiServices } = props;
+    const [currentDisplayValue, setCurrentDisplayValue] = useState(value);
+    const [protectionMode, setProtectionMode] = useState('mask');
+    const formatValue = (val) => {
+        if (typeof val !== 'string') {
+            return val;
+        }
+        else if (property.type === 'date' && protectionMode !== 'mask') {
+            return DateTime.fromISO(val).toFormat('MM/dd/yyyy');
+        }
+        else if (property.type === 'date-time') {
+            return DateTime.fromISO(val).toFormat('MM/dd/yyyy hh:mm a');
+        }
+        else if (property.type === 'time') {
+            return DateTime.fromISO(DateTime.now().toISODate() + 'T' + val).toFormat('hh:mm a');
+        }
+        return val;
+    };
+    return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+        React.createElement(Typography, { variant: "body1", key: property.id }, formatValue(currentDisplayValue)),
+        !!currentDisplayValue && (React.createElement(PropertyProtection, { parameter: property, protection: property?.protection, mask: property?.mask, value: currentDisplayValue, canEdit: false, setCurrentDisplayValue: setCurrentDisplayValue, mode: protectionMode, setMode: setProtectionMode, instance: instance, apiServices: apiServices }))));
+};

package/dist/published/components/custom/Form/types.d.ts

@@ -1,4 +1,4 @@
-import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { ApiServices, ObjectInstance, Property, PropertyProtection, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { AutocompleteOption } from '../../core';
 export type BaseFormComponentProps = {
@@ -52,6 +52,7 @@ export type BaseFormComponentProps = {
     apiServices: ApiServices;
     description?: string;
     displayOption?: 'radioButton' | 'dropdown' | 'dialogBox' | 'switch' | 'checkbox';
+    protection?: PropertyProtection;
 };
 export type ObjectPropertyInputProps = {
     id: string;

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PropertyProtection as PropertyProtectionType, SelectOption } from '@evoke-platform/context';
+import { ApiServices, PropertyProtection as PropertyProtectionType, SelectOption } from '@evoke-platform/context';
 import React, { FocusEventHandler, ReactNode } from 'react';
 import { ObjectProperty } from '../../../types';
 import { AutocompleteOption } from '../../core';
@@ -38,6 +38,10 @@ export type FormFieldProps = {
     isCombobox?: boolean;
     endAdornment?: ReactNode;
     protection?: PropertyProtectionType;
+    /** @deprecated only used for FormV1 since form context is not available */
+    instance?: Record<string, unknown>;
+    /** @deprecated only used for FormV1 since form context is not available */
+    apiServices?: ApiServices;
 };
 declare const FormField: (props: FormFieldProps) => React.JSX.Element;
 export default FormField;

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

@@ -18,7 +18,7 @@ const FormField = (props) => {
             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 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, instance: props.instance, apiServices: props.apiServices })) : null;
     const commonProps = {
         id: id ?? property.id,
         property,

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

@@ -118,7 +118,7 @@ const Select = (props) => {
                             setValue(e.target.value);
                             setInputValue(e.target.value);
                             onChange && onChange(property.id, e.target.value, property);
-                        }, size: 'small', onFocus: () => setIsOtherFocused(true), onBlur: (e) => {
+                        }, size: 'small', onFocus: () => setIsOtherFocused(true), onBlur: async (e) => {
                             // If another radio button is focused, change the value to that radio button's value.
                             const targetElement = e.nativeEvent.relatedTarget;
                             if (targetElement?.defaultValue && targetElement.name === `radioGroup-${id}`) {
@@ -128,6 +128,13 @@ const Select = (props) => {
                                 onChange && onChange(property.id, e.target.value, property);
                             }
                             setIsOtherFocused(false);
+                            // Trigger autosave when the custom value field loses focus
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
                         } })))))),
         onChange && !readOnly && value && (React.createElement(Box, { sx: {
                 ':hover': { cursor: 'pointer' },

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

@@ -2,6 +2,7 @@ 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 { FormContext } from '../../FormV2/components/FormContext';
 import Select from './Select';
 describe('Single select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -61,6 +62,27 @@ describe('Single select', () => {
         await user.click(customOption);
         expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), choiceProperty);
     });
+    it('triggers autosave when entering a custom value in dropdown combobox', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true })));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await user.type(input, 'custom option');
+        // Select the custom option from dropdown
+        const customOption = await screen.findByRole('option', { name: 'Add "custom option"' });
+        await user.click(customOption);
+        // Verify autosave was triggered
+        expect(onAutosaveMock).toHaveBeenCalledWith('testSelect');
+    });
 });
 describe('Multi select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -122,6 +144,34 @@ describe('Multi select', () => {
         expect(onChangeMock).toBeCalledTimes(2);
         expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], multiChoiceProperty);
     });
+    it('triggers autosave when entering custom values in multiselect combobox', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true })));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await user.type(input, 'custom option 1');
+        // Select the first custom option
+        const customOption1 = await screen.findByRole('option', { name: 'Add "custom option 1"' });
+        await user.click(customOption1);
+        // Verify autosave was triggered for first custom value
+        expect(onAutosaveMock).toHaveBeenCalledWith('multiSelect');
+        onAutosaveMock.mockClear();
+        // Add a second custom option
+        await user.type(input, 'custom option 2');
+        const customOption2 = await screen.findByRole('option', { name: 'Add "custom option 2"' });
+        await user.click(customOption2);
+        // Verify autosave was triggered for second custom value
+        expect(onAutosaveMock).toHaveBeenCalledWith('multiSelect');
+    });
 });
 describe('Radio Single select', () => {
     const choiceProperty = {
@@ -166,4 +216,55 @@ describe('Radio Single select', () => {
         await user.type(otherTextField, 'custom option');
         expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('custom option'), choiceProperty);
     });
+    it('triggers autosave when a custom value is entered', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true })));
+        // Select the "Other" radio option
+        await user.click(screen.getByRole('radio', { name: 'Other' }));
+        const otherTextField = await screen.findByRole('textbox', { name: 'Other' });
+        // Type a custom value
+        await user.type(otherTextField, 'custom option');
+        // Blur the text field by clicking elsewhere
+        await user.tab();
+        // Verify autosave was triggered
+        expect(onAutosaveMock).toHaveBeenCalledWith('testSelect');
+    });
+    it('triggers autosave when clearing the custom value', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true })));
+        // Select the "Other" radio option and enter a custom value
+        await user.click(await screen.findByRole('radio', { name: 'Other' }));
+        const otherTextField = await screen.findByRole('textbox', { name: 'Other' });
+        await user.type(otherTextField, 'custom option');
+        // Blur to set the value and trigger the first autosave
+        await user.tab();
+        // Clear the mock to isolate the clear action
+        onAutosaveMock.mockClear();
+        onChangeMock.mockClear();
+        // Click the clear button (now visible since value is set)
+        const clearButton = await screen.findByRole('button', { name: 'Clear' });
+        await user.click(clearButton);
+        // Verify onChange was called with empty value
+        expect(onChangeMock).toHaveBeenCalledWith('selectOptions', '');
+        // Verify autosave was triggered after clearing
+        expect(onAutosaveMock).toHaveBeenCalledWith('testSelect');
+    });
 });

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

@@ -1,4 +1,4 @@
-import { PropertyProtection as PropertyProtectionType } from '@evoke-platform/context';
+import { ApiServices, PropertyProtection as PropertyProtectionType } from '@evoke-platform/context';
 import React from 'react';
 import { ObjectProperty } from '../../../../types';
 type PropertyProtectionProps = {
@@ -11,6 +11,10 @@ type PropertyProtectionProps = {
     setCurrentDisplayValue: (value: unknown) => void;
     mode: 'mask' | 'full' | 'edit';
     setMode: (mode: 'mask' | 'full' | 'edit') => void;
+    /** @deprecated only used for FormV1 since form context is not available */
+    instance?: Record<string, unknown>;
+    /** @deprecated only used for FormV1 */
+    apiServices?: ApiServices;
 };
 declare const PropertyProtection: React.FC<PropertyProtectionProps>;
 export default PropertyProtection;

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

@@ -1,25 +1,47 @@
 import { useApiServices } from '@evoke-platform/context';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { CheckRounded, ClearRounded, EditRounded, VisibilityOffRounded, VisibilityRounded } from '../../../../icons';
 import { useFormContext } from '../../../../theme/hooks';
 import { Divider, IconButton, InputAdornment, Snackbar, Tooltip } from '../../../core';
 import { getPrefixedUrl } from '../../Form/utils';
 import { obfuscateValue } from './utils';
+// Global cache to persist data across component unmount/remount cycles (needed for FormV1)
+const globalCache = new Map();
 const PropertyProtection = (props) => {
-    const { parameter, mask, protection, canEdit, value, mode, setMode, setCurrentDisplayValue, handleChange } = props;
-    const apiServices = useApiServices();
+    const { parameter, mask, protection, canEdit, value, mode, setMode, setCurrentDisplayValue, handleChange, instance: instanceFormV1, apiServices: apiServicesFormV1, } = props;
+    const apiServices = apiServicesFormV1 ?? useApiServices();
     const { object, instance, fetchedOptions, setFetchedOptions } = useFormContext();
-    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${parameter.id}-hasViewPermission`] || undefined);
-    const [fullValue, setFullValue] = useState(fetchedOptions[`${parameter.id}-fullValue`]);
+    const isFormV1 = !!apiServicesFormV1;
+    const getCachedValue = (key) => {
+        if (isFormV1) {
+            const cache = globalCache.get(parameter.id);
+            if (key === 'hasViewPermission')
+                return cache?.hasViewPermission;
+            if (key === 'fullValue')
+                return cache?.fullValue;
+        }
+        return fetchedOptions?.[`${parameter.id}-${key}`];
+    };
+    const updateCache = (key, value) => {
+        if (isFormV1) {
+            globalCache.set(parameter.id, { ...globalCache.get(parameter.id), [key]: value });
+        }
+        else if (setFetchedOptions) {
+            setFetchedOptions({ [`${parameter.id}-${key}`]: value });
+        }
+    };
+    const [hasViewPermission, setHasViewPermission] = useState(getCachedValue('hasViewPermission'));
+    const [fullValue, setFullValue] = useState(getCachedValue('fullValue'));
     const [isLoading, setIsLoading] = useState(hasViewPermission === undefined);
     const [error, setError] = useState(null);
     useEffect(() => {
-        if (hasViewPermission === undefined && instance) {
+        if (hasViewPermission === undefined && (instance || instanceFormV1)) {
             apiServices
-                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/checkAccess?action=readProtected&fieldId=${parameter.id}`))
+                .get(getPrefixedUrl(`/objects/${object?.id ?? instanceFormV1?.objectId}/instances/${instance?.id ?? instanceFormV1?.id}/checkAccess?action=readProtected&fieldId=${parameter.id}`))
                 .then((viewPermissionCheck) => {
                 setHasViewPermission(viewPermissionCheck.result);
-                setFetchedOptions({ [`${parameter.id}-hasViewPermission`]: viewPermissionCheck.result });
+                updateCache(`hasViewPermission`, viewPermissionCheck.result);
             })
                 .catch(() => {
                 setError('Failed to check view permission.');
@@ -32,13 +54,13 @@ const PropertyProtection = (props) => {
     const canViewFull = hasViewPermission || hasValueChangedOrViewed;
     const fetchFullValue = async () => {
         // if instance doesn't exist, cannot fetch full value
-        if (!instance) {
+        if (isEmpty(instance) && isEmpty(instanceFormV1)) {
             return undefined;
         }
         try {
-            const value = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/properties/${parameter.id}?showProtectedValue=true`));
+            const value = await apiServices.get(getPrefixedUrl(`/objects/${object?.id ?? instanceFormV1?.objectId}/instances/${instance?.id ?? instanceFormV1?.id}/properties/${parameter.id}?showProtectedValue=true`));
             setFullValue(value);
-            setFetchedOptions({ [`${parameter.id}-fullValue`]: value });
+            updateCache('fullValue', value);
             return value;
         }
         catch (error) {
@@ -75,7 +97,7 @@ const PropertyProtection = (props) => {
             // save current value as full value, so value can be reverted as needed
             if (hasValueChangedOrViewed) {
                 setFullValue(value);
-                setFetchedOptions({ [`${parameter.id}-fullValue`]: value });
+                updateCache('fullValue', value);
             }
         }
         setMode(newMode);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.1-dev.6",
+    "version": "1.11.0-dev.1",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",