@evoke-platform/ui-components 1.13.0-dev.0 → 1.13.0-dev.2

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

@@ -85,8 +85,8 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'object') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
-                        ? updateCriteriaInputs(validation.criteria, getValues(), userAccount)
+                React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: 'criteria' in validation && validation.criteria
+                        ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
                         : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
                         ? display?.defaultValue.sortBy
                         : undefined, orderBy: typeof display?.defaultValue === 'object' && 'orderBy' in display.defaultValue
@@ -104,7 +104,9 @@ export function RecursiveEntryRenderer(props) {
                 if (middleObject && !isEmpty(middleObject)) {
                     return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
                         React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
-                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description }))));
+                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: 'criteria' in validation && validation.criteria
+                                ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
+                                : undefined, hasDescription: !!display?.description }))));
                 }
                 else {
                     // when in the builder preview, the middle object won't be fetched so instead show an empty field
@@ -116,7 +118,9 @@ export function RecursiveEntryRenderer(props) {
             }
             else {
                 return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: 'criteria' in validation && validation.criteria
+                            ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
+                            : undefined, viewLayout: display?.viewLayout, entry: entry })));
             }
         }
         else if (fieldDefinition.type === 'richText') {

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

@@ -40,7 +40,7 @@ export declare const encodePageSlug: (slug: string) => string;
 export declare function getDefaultPages(parameters: InputParameter[], defaultPages: Record<string, string> | undefined, findDefaultPageSlugFor: (objectId: string) => Promise<string | undefined>): Promise<{
     [x: string]: string;
 }>;
-export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount): Record<string, unknown>;
+export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount, instance?: Record<string, unknown>): Record<string, unknown>;
 export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
 export declare const getErrorCountForSection: (section: Section | Column, errors?: FieldErrors) => number;
 export declare const propertyToParameter: (property: Property) => InputParameter;

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

@@ -1,5 +1,5 @@
 import { LocalDateTime } from '@js-joda/core';
-import jsonLogic from 'json-logic-js';
+import { jsonLogic } from 'json-logic-js-graphql';
 import { get, isArray, isEmpty, isObject, omit, pick, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
 import { nanoid } from 'nanoid';
@@ -307,12 +307,13 @@ function compileQueryValues(query, data) {
         return query;
     }
 }
-export function updateCriteriaInputs(criteria, data, user) {
+export function updateCriteriaInputs(criteria, data, user, instance) {
     const dataSet = {
         input: {
             ...data,
         },
         user: user,
+        instance,
     };
     const compiledQuery = compileQueryValues(parseMongoDB(criteria), dataSet);
     // The "compiledQueryValues" function filters out rules that have a value of "undefined".

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

@@ -135,6 +135,44 @@ describe('FormRenderer', () => {
             // Validate that specialty type dropdown renders
             await screen.findByRole('combobox', { name: 'Specialty Type' });
         });
+        it('shows fields based on form data using JsonLogic with a Lodash function', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            const user = userEvent.setup();
+            const FormWithState = () => {
+                const [formData, setFormData] = React.useState({
+                    specialtyType: { id: 'rnSpecialtyType1', name: 'RN Specialty Type #1' },
+                });
+                const handleChange = (id, value) => {
+                    setFormData((prev) => {
+                        const newData = { ...prev };
+                        set(newData, id, value);
+                        return newData;
+                    });
+                };
+                try {
+                    return (React.createElement(FormRenderer, { form: jsonLogicDisplayTestSpecialtyForm, value: formData, onChange: handleChange, instance: {
+                            id: '123',
+                            objectId: 'specialty',
+                            name: 'Test Specialty Object Instance',
+                        } }));
+                }
+                catch (err) {
+                    console.error('Render error:', err);
+                    return React.createElement("div", null, "Render error");
+                }
+            };
+            render(React.createElement(FormWithState, null));
+            // Validate that Additional Training renders because specialtyType.name isn't empty
+            await screen.findByRole('textbox', { name: 'Additional Training' });
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+            // Clear the specialtyType field
+            const clearButton = screen.getByRole('button', { name: 'Clear selection' });
+            await user.click(clearButton);
+            // Validate that Additional Training is no longer visible because specialtyType.name is now empty
+            await waitFor(() => {
+                expect(screen.queryByRole('textbox', { name: 'Additional Training' })).not.toBeInTheDocument();
+            });
+        });
         it('hides fields based on instance data using JsonLogic', async () => {
             server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
             render(React.createElement(FormRenderer, { form: jsonLogicDisplayTestSpecialtyForm, onChange: () => { }, instance: {
@@ -170,7 +208,6 @@ describe('FormRenderer', () => {
             expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).not.toBeInTheDocument();
         });
     });
-    // accessibility508Form2
     describe('508 accessibility compliance', () => {
         it('supports keyboard navigation back and forth through Related Object dropdowns', async () => {
             const user = userEvent.setup();

package/dist/published/components/custom/FormV2/tests/test-data.js

@@ -87,6 +87,25 @@ export const jsonLogicDisplayTestSpecialtyForm = {
                 },
             },
         },
+        {
+            parameterId: 'additionalTraining',
+            type: 'input',
+            display: {
+                label: 'Additional Training',
+                visibility: {
+                    and: [
+                        {
+                            '!': {
+                                _isEmpty: { var: 'data.specialtyType.name' },
+                            },
+                        },
+                        {
+                            in: [{ var: 'data.specialtyType.name' }, ['RN Specialty Type #1', 'RN Specialty Type #2']],
+                        },
+                    ],
+                },
+            },
+        },
         {
             parameterId: 'license',
             type: 'input',
@@ -360,6 +379,11 @@ export const specialtyObject = {
             type: 'object',
             objectId: 'license',
         },
+        {
+            id: 'additionalTraining',
+            name: 'Additional Training',
+            type: 'string',
+        },
     ],
     actions: [
         {
@@ -422,6 +446,11 @@ export const specialtyObject = {
                     type: 'object',
                     objectId: 'license',
                 },
+                {
+                    id: 'additionalTraining',
+                    name: 'Additional Training',
+                    type: 'string',
+                },
             ],
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.13.0-dev.0",
+    "version": "1.13.0-dev.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -128,6 +128,7 @@
         "flat": "^6.0.1",
         "formiojs": "^4.21.7",
         "html-react-parser": "^5.1.18",
+        "json-logic-js-graphql": "^1.2.4",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",