@evoke-platform/ui-components 1.10.0-dev.34 → 1.10.0-dev.35

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

@@ -1,9 +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) {
@@ -28,12 +29,16 @@ 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);
@@ -49,12 +54,23 @@ const DatePickerSelect = (props) => {
             }
         }
     };
-    return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
+    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/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/FormV2/FormRenderer.js

@@ -122,6 +122,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
@@ -145,6 +161,7 @@ const FormRendererInternal = (props) => {
     };
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
+        removeUneditedProtectedValues();
         await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {

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

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

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

@@ -0,0 +1,113 @@
+import { useApiServices } from '@evoke-platform/context';
+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';
+const PropertyProtection = (props) => {
+    const { parameter, mask, protection, canEdit, value, mode, setMode, setCurrentDisplayValue, handleChange } = props;
+    const apiServices = 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 [isLoading, setIsLoading] = useState(hasViewPermission === undefined);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (hasViewPermission === undefined && instance) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/checkAccess?action=readProtected&fieldId=${parameter.id}`))
+                .then((viewPermissionCheck) => {
+                setHasViewPermission(viewPermissionCheck.result);
+                setFetchedOptions({ [`${parameter.id}-hasViewPermission`]: viewPermissionCheck.result });
+            })
+                .catch(() => {
+                setError('Failed to check view permission.');
+                setHasViewPermission(false);
+            })
+                .finally(() => setIsLoading(false));
+        }
+    }, []);
+    const hasValueChangedOrViewed = value !== obfuscateValue(value, { protection, mask });
+    const canViewFull = hasViewPermission || hasValueChangedOrViewed;
+    const fetchFullValue = async () => {
+        // if instance doesn't exist, cannot fetch full value
+        if (!instance) {
+            return undefined;
+        }
+        try {
+            const value = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/properties/${parameter.id}?showProtectedValue=true`));
+            setFullValue(value);
+            setFetchedOptions({ [`${parameter.id}-fullValue`]: value });
+            return value;
+        }
+        catch (error) {
+            setError(`Failed to retrieve full ${parameter.name} value`);
+            return '';
+        }
+    };
+    const handleModeChange = async (newMode) => {
+        if (newMode === 'edit') {
+            if (!canEdit) {
+                // sanity check that user can edit
+                return;
+            }
+            if (!hasViewPermission && !hasValueChangedOrViewed) {
+                handleChange?.(undefined);
+                setCurrentDisplayValue(undefined);
+            }
+        }
+        else if (newMode === 'full') {
+            let valueToDisplay;
+            if (hasValueChangedOrViewed) {
+                // Use the changed value if available
+                valueToDisplay = fullValue;
+            }
+            else {
+                valueToDisplay = fullValue ?? (await fetchFullValue());
+            }
+            setCurrentDisplayValue(valueToDisplay);
+            handleChange?.(valueToDisplay);
+        }
+        else {
+            const maskedValue = obfuscateValue(value, { protection, mask });
+            setCurrentDisplayValue(maskedValue);
+            // save current value as full value, so value can be reverted as needed
+            if (hasValueChangedOrViewed) {
+                setFullValue(value);
+                setFetchedOptions({ [`${parameter.id}-fullValue`]: value });
+            }
+        }
+        setMode(newMode);
+    };
+    const handleRevert = async () => {
+        const revertedValue = fullValue ?? (await fetchFullValue());
+        handleChange?.(revertedValue);
+        setCurrentDisplayValue(obfuscateValue(revertedValue, { protection, mask }));
+        setMode('mask');
+    };
+    if (isLoading || (!canEdit && !hasViewPermission)) {
+        return null;
+    }
+    return (React.createElement(InputAdornment, { position: "end", sx: { paddingLeft: parameter?.type === 'date' ? '12px' : undefined } },
+        mode === 'edit' && (React.createElement(React.Fragment, null,
+            React.createElement(IconButton, { onClick: () => handleModeChange('mask'), "aria-label": "Done Editing" },
+                React.createElement(Tooltip, { title: "Done Editing" },
+                    React.createElement(CheckRounded, { fontSize: "small" }))),
+            React.createElement(Divider, { orientation: "vertical", sx: { mx: 0.5, height: 24 } }),
+            React.createElement(IconButton, { size: "small", onClick: handleRevert, "aria-label": "Revert value" },
+                React.createElement(Tooltip, { title: "Revert value" },
+                    React.createElement(ClearRounded, { fontSize: "small" }))))),
+        canEdit && (mode === 'full' || (!hasViewPermission && !hasValueChangedOrViewed && mode === 'mask')) && (React.createElement(IconButton, { onClick: () => handleModeChange('edit'), "aria-label": canViewFull ? 'Edit value' : 'Enter value' },
+            React.createElement(Tooltip, { title: "Edit value" },
+                React.createElement(EditRounded, { fontSize: "small" })))),
+        canEdit && canViewFull && mode === 'full' && (React.createElement(Divider, { orientation: "vertical", sx: { mx: 0.5, height: 24 } })),
+        canViewFull && mode === 'mask' && (React.createElement(IconButton, { onClick: () => handleModeChange('full'), "aria-label": "Show full value" },
+            React.createElement(Tooltip, { title: "Show full value" },
+                React.createElement(VisibilityOffRounded, { fontSize: "small" })))),
+        canViewFull && mode === 'full' && (React.createElement(IconButton, { onClick: () => handleModeChange('mask'), "aria-label": "Hide value" },
+            React.createElement(Tooltip, { title: "Hide value" },
+                React.createElement(VisibilityRounded, { fontSize: "small" })))),
+        React.createElement(Snackbar, { open: !!error, handleClose: () => setError(null), error: true, message: error })));
+};
+export default PropertyProtection;

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

@@ -153,6 +153,7 @@ export function RecursiveEntryRenderer(props) {
                     'aria-describedby': `${entryId}-description`,
                 };
             }
+            const objectProperty = object?.properties?.find((p) => p.id === entryId);
             return (React.createElement(FieldWrapper
             /*
              * Key remounts the field if a value is changed.
@@ -178,7 +179,7 @@ export function RecursiveEntryRenderer(props) {
                         });
                     }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
                         ? display?.booleanDisplay
-                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
+                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue, protection: objectProperty?.protection })));
         }
     }
     else if (entry.type === 'columns') {

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

@@ -2,6 +2,7 @@
 import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
+import { ObjectProperty } from '../../../../types';
 import { AutocompleteOption } from '../../../core';
 import { Document, DocumentData, SavedDocumentReference } from './types';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
@@ -102,3 +103,4 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], obj
  */
 export declare function plainTextToRtf(plainText: string): string;
 export declare function getFieldDefinition(entry: FormEntry, object: Obj, parameters?: InputParameter[], isDocument?: boolean): InputParameter | Property | undefined;
+export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;

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

@@ -833,3 +833,65 @@ export function getFieldDefinition(entry, object, parameters, isDocument) {
     }
     return def;
 }
+export function obfuscateValue(value, property) {
+    const { mask, protection } = property ?? {};
+    if (!protection?.maskChar) {
+        return value;
+    }
+    const maskChar = protection.maskChar;
+    const stringValue = String(value ?? '');
+    const simpleValue = mask && mask.length === stringValue.length ? stripValueOfMask(stringValue, mask) : stringValue;
+    let { preserveFirst = 0, preserveLast = 0 } = protection;
+    // Preserved character count should never exceed simpleValue length.
+    // Also, when using preserve characters, always hide at least 1 character.
+    preserveFirst = Math.min(preserveFirst, simpleValue.length - 1);
+    preserveLast = Math.min(preserveLast, simpleValue.length - preserveFirst - 1);
+    let obfuscatedValue = '';
+    if (simpleValue.length) {
+        const prefix = simpleValue.slice(0, preserveFirst);
+        const suffix = preserveLast ? simpleValue.slice(-preserveLast) : '';
+        const maskedSection = maskChar[0].repeat(simpleValue.length - preserveFirst - preserveLast);
+        obfuscatedValue = prefix + maskedSection + suffix;
+    }
+    // Reapply mask to the obfuscated value
+    if (mask && mask.length === stringValue.length) {
+        obfuscatedValue = applyMaskToObfuscatedValue(obfuscatedValue, mask);
+    }
+    return obfuscatedValue;
+}
+function stripValueOfMask(value, mask) {
+    const valueChars = [...value];
+    let simpleValue = '';
+    for (const [index, maskChar] of [...mask].entries()) {
+        const isPlaceholder = ['9', 'a', '*'].includes(maskChar);
+        if (!valueChars[index]) {
+            break;
+        }
+        else if (isPlaceholder) {
+            simpleValue += valueChars[index];
+        }
+    }
+    return simpleValue;
+}
+function applyMaskToObfuscatedValue(value, mask) {
+    const valueChars = [...value];
+    let maskedValue = '';
+    let valueIndex = 0;
+    for (const maskChar of mask) {
+        const isPlaceholder = ['9', 'a', '*'].includes(maskChar);
+        if (isPlaceholder) {
+            if (valueIndex < valueChars.length) {
+                maskedValue += valueChars[valueIndex];
+                valueIndex++;
+            }
+            else {
+                // Stop if value is shorter than mask
+                break;
+            }
+        }
+        else {
+            maskedValue += maskChar;
+        }
+    }
+    return maskedValue;
+}

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.js

@@ -15,6 +15,7 @@ import RepeatableField from '../FormV2/components/FormFieldTypes/CollectionFiles
 import Criteria from '../FormV2/components/FormFieldTypes/Criteria';
 import { Document } from '../FormV2/components/FormFieldTypes/DocumentFiles/Document';
 import { Image } from '../FormV2/components/FormFieldTypes/Image';
+import PropertyProtection from '../FormV2/components/PropertyProtection';
 import { entryIsVisible, fetchCollectionData, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
@@ -23,6 +24,8 @@ function ViewOnlyEntryRenderer(props) {
     const apiServices = useApiServices();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${entryId}NavigationSlug`]);
+    const [currentDisplayValue, setCurrentDisplayValue] = useState(instance?.[entryId]);
+    const [protectionMode, setProtectionMode] = useState('mask');
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const display = 'display' in entry ? entry.display : undefined;
@@ -40,6 +43,8 @@ function ViewOnlyEntryRenderer(props) {
         }
         return def;
     }, [entry, object]);
+    const isProtectedProperty = fieldDefinition?.protection?.maskChar;
+    const protectionComponent = isProtectedProperty ? (React.createElement(PropertyProtection, { parameter: fieldDefinition, protection: fieldDefinition?.protection, mask: fieldDefinition?.mask, value: currentDisplayValue, canEdit: false, setCurrentDisplayValue: setCurrentDisplayValue, mode: protectionMode, setMode: setProtectionMode })) : null;
     useEffect(() => {
         if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
             fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
@@ -72,7 +77,7 @@ function ViewOnlyEntryRenderer(props) {
             return (React.createElement(AddressFields, { entry: entry, viewOnly: true, entryId: entryId, fieldDefinition: fieldDefinition }));
         }
         else {
-            let fieldValue = instance?.[entryId] || '';
+            let fieldValue = currentDisplayValue ?? (instance?.[entryId] || '');
             switch (fieldDefinition?.type) {
                 case 'object':
                     if (navigationSlug && fieldDefinition?.objectId) {
@@ -93,7 +98,10 @@ function ViewOnlyEntryRenderer(props) {
                     fieldValue = fieldValue && fieldValue.name;
                     break;
                 case 'date':
-                    fieldValue = fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
+                    fieldValue =
+                        isProtectedProperty && protectionMode === 'mask'
+                            ? fieldValue
+                            : fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
                     break;
                 case 'date-time':
                     fieldValue =
@@ -136,7 +144,9 @@ function ViewOnlyEntryRenderer(props) {
                         React.createElement(Criteria, { value: fieldValue, fieldDefinition: fieldDefinition, canUpdateProperty: false })));
                 }
                 else {
-                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition?.type || 'string', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true }, fieldDefinition?.type === 'boolean' && fieldValue ? (React.createElement(CheckCircleRounded, { "aria-label": "Checked", color: "success" })) : fieldDefinition?.type === 'boolean' ? (React.createElement(CancelRounded, { "aria-label": "Unchecked", color: "error" })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue))));
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition?.type || 'string', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true }, fieldDefinition?.type === 'boolean' && fieldValue ? (React.createElement(CheckCircleRounded, { "aria-label": "Checked", color: "success" })) : fieldDefinition?.type === 'boolean' ? (React.createElement(CancelRounded, { "aria-label": "Unchecked", color: "error" })) : (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                        React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue),
+                        fieldDefinition?.protection?.maskChar && protectionComponent))));
                 }
             }
         }

package/dist/published/types.d.ts

@@ -1,3 +1,4 @@
+import { PropertyProtection } from '@evoke-platform/context';
 export type EvokeObject = {
     id: string;
     name: string;
@@ -13,6 +14,8 @@ export type ObjectProperty = {
     searchable?: boolean;
     objectId?: string;
     formula?: string;
+    mask?: string;
+    protection?: PropertyProtection;
 };
 export type Obj = {
     id: string;

package/package.json

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