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

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -1,5 +1,6 @@
 import { ExpandMore, InfoRounded } from '@mui/icons-material';
 import { InputLabel, Autocomplete as MUIAutocomplete } from '@mui/material';
+import { omit } from 'lodash';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
@@ -37,6 +38,7 @@ const Autocomplete = (props) => {
             return props.instructionText;
         }
     };
+    const muiAutocompleteProps = omit(props, 'sortBy', 'error', 'errorMessage', 'labelPlacement', 'instructionText');
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
             React.createElement(InputLabel, { htmlFor: props.id ?? '', sx: { display: 'flex', paddingBottom: '0px', fontSize: '14px' } },
@@ -50,7 +52,7 @@ const Autocomplete = (props) => {
                             color: (theme) => theme.palette.text.secondary,
                         } })))),
             renderInstructionText(),
-            React.createElement(MUIAutocomplete, { ...props, sx: {
+            React.createElement(MUIAutocomplete, { ...muiAutocompleteProps, sx: {
                     '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',
@@ -67,7 +69,7 @@ const Autocomplete = (props) => {
     }
     else {
         return (React.createElement(UIThemeProvider, null,
-            React.createElement(MUIAutocomplete, { ...props, sx: {
+            React.createElement(MUIAutocomplete, { ...muiAutocompleteProps, sx: {
                     '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined },
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: props.readOnly ? 'none' : 'auto',

package/dist/published/components/core/Autocomplete/Autocomplete.test.js

@@ -1,11 +1,120 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { it } from 'vitest';
 import TextField from '../TextField';
 import Autocomplete from './Autocomplete';
-const renderInput = (params) => React.createElement(TextField, { ...params });
+const renderInputFactory = (label) => (params) => React.createElement(TextField, { ...params, label: label });
 const options = [];
-it('renders with label outside outline', () => {
-    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInput, options: options }));
+it('should render with label outside outline', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInputFactory(), options: options }));
     screen.getByRole('combobox', { name: 'Title' });
 });
+it('should render label outside outline with asterisk when required', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", renderInput: renderInputFactory(), options: options, required: true }));
+    screen.getByRole('combobox', { name: 'Title *' });
+});
+it('should render instruction text when provided when there is an outside-top label', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", instructionText: "This is an instruction", renderInput: renderInputFactory(), options: options }));
+    screen.getByText('This is an instruction');
+});
+it('should not render instruction text when there is not an outside-top label', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", instructionText: "This is an instruction", renderInput: renderInputFactory(), options: options }));
+    const instructionText = screen.queryByText('This is an instruction');
+    expect(instructionText).not.toBeInTheDocument();
+});
+it('should render a tooltip if one is provided and there is an outside-top label', async () => {
+    const user = userEvent.setup();
+    render(React.createElement(Autocomplete, { id: "testinput", labelPlacement: "outside-top", label: "Title", tooltip: "This is a tooltip", renderInput: renderInputFactory(), options: options }));
+    expect(screen.queryByText('This is a tooltip')).not.toBeInTheDocument();
+    await user.hover(screen.getByLabelText('This is a tooltip'));
+    await screen.findByText('This is a tooltip');
+});
+it('should sort options in ascending order if sortBy is ASC', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "ASC", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should sort options in descending order if sortBy is DESC', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "DESC", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Cherry', 'Banana', 'Apple']);
+});
+it('should not sort options if sortBy is NONE', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "NONE", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Banana', 'Apple', 'Cherry']);
+});
+it('should sort options in ascending order by default', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = [
+        { label: 'Banana', value: 1 },
+        { label: 'Apple', value: 2 },
+        { label: 'Cherry', value: 3 },
+    ];
+    render(React.createElement(Autocomplete, { id: "testinput", renderInput: renderInputFactory('Fruits'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruits' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should sort string options', async () => {
+    const user = userEvent.setup();
+    const unsortedOptions = ['Banana', 'Apple', 'Cherry'];
+    render(React.createElement(Autocomplete, { id: "testinput", sortBy: "ASC", renderInput: renderInputFactory('Fruit Options'), options: unsortedOptions }));
+    const comboBox = screen.getByRole('combobox', { name: 'Fruit Options' });
+    await user.click(comboBox);
+    const options = screen.getAllByRole('option');
+    const labels = options.map((option) => option.textContent);
+    expect(labels).toEqual(['Apple', 'Banana', 'Cherry']);
+});
+it('should render an error when error prop is true', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", error: true, errorMessage: "This is an error", labelPlacement: "outside-top", renderInput: renderInputFactory(), options: options }));
+    screen.getByText('This is an error');
+});
+it('should show popupIcon when not disabled', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", disabled: false, renderInput: renderInputFactory(), options: options }));
+    screen.getByTestId('ExpandMoreIcon');
+});
+it('should hide popupIcon when disabled', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", disabled: true, renderInput: renderInputFactory(), options: options }));
+    const popupIcon = screen.queryByTestId('ExpandMoreIcon');
+    expect(popupIcon).not.toBeInTheDocument();
+});
+it('should hide popupIcon when readOnly', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", readOnly: true, renderInput: renderInputFactory(), options: options }));
+    const popupIcon = screen.queryByTestId('ExpandMoreIcon');
+    expect(popupIcon).not.toBeInTheDocument();
+});
+it('should show custom popupIcon when provided', () => {
+    render(React.createElement(Autocomplete, { id: "testinput", label: "Title", popupIcon: React.createElement("span", { "data-testid": "custom-icon" }, "^"), renderInput: renderInputFactory(), options: options }));
+    screen.getByTestId('custom-icon');
+});

package/dist/published/components/core/TextField/TextField.js

@@ -36,7 +36,7 @@ const TextField = (props) => {
                     ...props.sx,
                 } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage }))) : (React.createElement(React.Fragment, null,
-        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...props, sx: readOnly
+        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...muiProps, sx: readOnly
                 ? { ...readOnlyStyles, ...props.sx }
                 : { '& fieldset': { borderRadius: '8px' }, ...props.sx } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage })))));

package/dist/published/components/core/TextField/TextField.test.js

@@ -1,9 +1,7 @@
-import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { expect, it } from 'vitest';
 import TextField from './index';
-expect.extend(matchers);
 it('render TextField and check for data-testid === label-outside when labelPlacement === outside-top && variant === outlined', () => {
     render(React.createElement(TextField, { id: "testinput", labelPlacement: "outside-top", variant: "outlined", label: "Title" }));
     const textField = screen.getByRole('textbox', { name: 'Title' });

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

@@ -400,9 +400,31 @@ const CriteriaBuilder = (props) => {
     const fields = useMemo(() => {
         return properties
             .filter(({ type }) => type !== 'collection')
-            .map((property) => {
+            .flatMap((property) => {
+            if (property.type === 'object') {
+                const result = [
+                    {
+                        name: `${property.id}.id`,
+                        label: `${property.name} ID`,
+                        inputType: property.type,
+                    },
+                    {
+                        name: `${property.id}.name`,
+                        label: `${property.name} Name`,
+                        inputType: property.type,
+                    },
+                ];
+                if (!property.objectId) {
+                    result.push({
+                        name: `${property.id}.objectId`,
+                        label: `${property.name} Object ID`,
+                        inputType: property.type,
+                    });
+                }
+                return result;
+            }
             return {
-                name: property.type === 'object' ? `${property.id}.id` : property.id,
+                name: property.id,
                 label: property.name,
                 inputType: property.type,
                 ...(property.enum && {

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.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 { expect, it } from 'vitest';
 import CriteriaBuilder from './CriteriaBuilder';
-expect.extend(matchers);
 const mockProperties = [
     {
         id: 'name',
@@ -58,6 +56,17 @@ const mockProperties = [
         name: 'Boolean',
         type: 'boolean',
     },
+    {
+        id: 'regularRelatedObject',
+        name: 'Regular Related Object',
+        type: 'object',
+        objectId: 'relatedObjectId',
+    },
+    {
+        id: 'dynamicRelatedObject',
+        name: 'Dynamic Related Object',
+        type: 'object',
+    },
 ];
 describe('CriteriaBuilder', () => {
     // Mock function for setCriteria
@@ -66,6 +75,40 @@ describe('CriteriaBuilder', () => {
         // Reset the mock before each test
         setCriteriaMock.mockReset();
     });
+    describe('when passed regular related object fields', () => {
+        it('should render the field ID', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'regularRelatedObject.id': 'relatedInstanceId',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Regular Related Object ID');
+        });
+        it('should render the field Name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'regularRelatedObject.name': 'relatedInstanceName',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Regular Related Object Name');
+        });
+    });
+    describe('when passed dynamic related object fields', () => {
+        it('should render the field ID', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'dynamicRelatedObject.id': 'relatedInstanceId',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Dynamic Related Object ID');
+        });
+        it('should render the field Name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'dynamicRelatedObject.name': 'relatedInstanceName',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Dynamic Related Object Name');
+        });
+        it('should render the field Object ID', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'dynamicRelatedObject.objectId': 'relatedInstanceObjectId',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Dynamic Related Object Object ID');
+        });
+    });
     describe('when passed single-select fields', () => {
         it('should render the field name', () => {
             render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -42,7 +42,8 @@ export const Document = (props) => {
         if (canUpdateProperty) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`))
-                .then((accessCheck) => setHasUpdatePermission(accessCheck.result));
+                .then((accessCheck) => setHasUpdatePermission(accessCheck.result))
+                .catch(() => setHasUpdatePermission(false));
         }
     };
     const handleUpload = async (files) => {

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/FormField/DatePickerSelect/DatePickerSelect.js

@@ -1,8 +1,10 @@
 import { DateTimeFormatter } from '@js-joda/core';
 import { omit } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
+import { obfuscateValue } from '../../FormV2/components/utils';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 function asCalendarDate(value) {
     if (!value) {
@@ -27,21 +29,48 @@ 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 { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, onChange, additionalProps, endAdornment, protection, } = props;
+    const { onAutosave } = useFormContext();
+    const processValue = useCallback((val) => {
+        const isProtected = protection?.maskChar && val === obfuscateValue(val, { protection });
+        return isProtected && typeof val === 'string' ? val : asCalendarDate(val);
+    }, [protection]);
+    const [value, setValue] = useState(() => processValue(defaultValue));
     useEffect(() => {
-        setValue(asCalendarDate(defaultValue));
-    }, [defaultValue]);
+        setValue(processValue(defaultValue));
+    }, [defaultValue, processValue]);
     const handleChange = (date) => {
         setValue(date);
         onChange && onChange(property.id, date, property);
     };
-    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', 
+    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: protection?.maskChar && value === obfuscateValue(value, { protection })
+                ? value
+                : asMonthDayYearFormat(value),
+            endAdornment,
+        } })) : (React.createElement(LocalizationProvider, null,
+        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,
                     ...(additionalProps?.inputProps ?? {}),
+                }, InputProps: {
+                    ...params.InputProps,
+                    endAdornment: (React.createElement(React.Fragment, null,
+                        params.InputProps?.endAdornment,
+                        endAdornment)),
                 }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DatePickerSelect;

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;