@evoke-platform/ui-components 1.10.0-dev.6 → 1.10.0-dev.8

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

@@ -248,7 +248,7 @@ const customDelete = (props) => {
             '&:hover': { backgroundColor: 'transparent', boxShadow: 'none' },
             color: '#212B36',
             fontWeight: '400',
-        } }, "Delete group")) : (React.createElement(IconButton, { onClick: handleOnClick, size: "small" },
+        } }, "Delete group")) : (React.createElement(IconButton, { onClick: handleOnClick, size: "small", "aria-label": "Delete rule" },
         React.createElement(TrashCan, { sx: { ':hover': { color: '#637381' } } })))) : (React.createElement(React.Fragment, null));
 };
 export const valueEditor = (props) => {

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,430 @@
+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',
+        name: 'Name',
+        type: 'string',
+    },
+    {
+        id: 'age',
+        name: 'Age',
+        type: 'integer',
+    },
+    {
+        id: 'birthDate',
+        name: 'Birth Date',
+        type: 'date',
+    },
+    {
+        id: 'createdTime',
+        name: 'Created Time',
+        type: 'time',
+    },
+    {
+        id: 'tags',
+        name: 'Tags',
+        type: 'array',
+        enum: ['tag1', 'tag2', 'tag3'],
+    },
+    {
+        id: 'status',
+        name: 'Status',
+        type: 'string',
+        enum: ['active', 'inactive', 'pending'],
+    },
+    {
+        id: 'profilePic',
+        name: 'Profile Picture',
+        type: 'image',
+    },
+    {
+        id: 'metadata',
+        name: 'Metadata',
+        type: 'document',
+    },
+    {
+        id: 'percentCompleted',
+        name: 'Percent Completed',
+        type: 'number',
+    },
+    {
+        id: 'boolean',
+        name: 'Boolean',
+        type: 'boolean',
+    },
+];
+describe('CriteriaBuilder', () => {
+    // Mock function for setCriteria
+    const setCriteriaMock = vi.fn();
+    beforeEach(() => {
+        // Reset the mock before each test
+        setCriteriaMock.mockReset();
+    });
+    describe('when passed single-select fields', () => {
+        it('should render the field name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    status: 'active',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Status');
+        });
+        it('should render the "is" operator to represent equality', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    status: 'active',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select operator/i })).toHaveValue('Is');
+        });
+        ['In', 'Is', 'Is empty', 'Is not', 'Is not empty', 'Not in'].forEach((operator) => {
+            it(`should offer the ${operator} operator`, async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        status: 'active',
+                    }, setCriteria: setCriteriaMock }));
+                await user.click(screen.getByRole('combobox', { name: /select operator/i }));
+                await screen.findByRole('option', { name: operator });
+            });
+        });
+        describe('when utilizing the "is" operator', () => {
+            it('should display a single preloaded value', async () => {
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        status: 'active',
+                    }, setCriteria: setCriteriaMock }));
+                expect(screen.getByRole('combobox', { name: 'Select or enter a value' })).toHaveValue('active');
+            });
+            it('should hide list of values after selecting a value', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        status: '',
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                const listbox = await screen.findByRole('listbox');
+                await user.click(screen.getByRole('option', { name: 'active' }));
+                expect(listbox).not.toBeInTheDocument();
+            });
+            it('should mark the selected value in the list', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        status: 'active',
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                const selectedOption = await screen.findByRole('option', { name: 'active' });
+                expect(selectedOption).toHaveAttribute('aria-selected', 'true');
+            });
+            it('should allow values to be deleted using the backspace key', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        status: 'active',
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                for (let i = 0; i < 6; i++) {
+                    await user.type(valueInput, '{Backspace}');
+                }
+                // Clear focus away from input
+                await user.click(screen.getByRole('combobox', { name: /select operator/i }));
+                expect(screen.getByRole('combobox', { name: /select or enter a value/i })).toHaveValue('');
+            });
+        });
+    });
+    describe('when passed multi-select (array) fields', () => {
+        it('should render the field name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    tags: { $in: ['tag1', 'tag2'] },
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Tags');
+        });
+        it('should load the correct operator for pre-loaded data', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    tags: { $in: ['tag1', 'tag2'] },
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select operator/i })).toHaveValue('In');
+        });
+        ['In', 'Is empty', 'Is not empty'].forEach((operator) => {
+            it(`should offer the ${operator} operator`, async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        tags: { $in: ['tag1', 'tag2'] },
+                    }, setCriteria: setCriteriaMock }));
+                await user.click(screen.getByRole('combobox', { name: /select operator/i }));
+                await screen.findByRole('option', { name: operator });
+            });
+        });
+        it('should display a single preloaded value', async () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    tags: { $in: ['tag1'] },
+                }, setCriteria: setCriteriaMock }));
+            screen.getByRole('button', { name: 'tag1' });
+        });
+        it('should display multiple preloaded values', async () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    tags: { $in: ['tag1', 'tag2'] },
+                }, setCriteria: setCriteriaMock }));
+            screen.getByRole('button', { name: 'tag1' });
+            screen.getByRole('button', { name: 'tag2' });
+        });
+        it('should hide list of values open after selecting a value', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    tags: { $in: [] },
+                }, setCriteria: setCriteriaMock }));
+            const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+            await user.click(valueInput);
+            const listbox = await screen.findByRole('listbox');
+            await user.click(screen.getByRole('option', { name: 'tag1' }));
+            expect(listbox).not.toBeInTheDocument();
+        });
+        it('should mark the selected values in the list', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    tags: { $in: ['tag1', 'tag2'] },
+                }, setCriteria: setCriteriaMock }));
+            const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+            await user.click(valueInput);
+            const selectedOption1 = await screen.findByRole('option', { name: 'tag1' });
+            const selectedOption2 = await screen.findByRole('option', { name: 'tag2' });
+            expect(selectedOption1).toHaveAttribute('aria-selected', 'true');
+            expect(selectedOption2).toHaveAttribute('aria-selected', 'true');
+        });
+    });
+    describe('when passed (decimal) number fields', () => {
+        it('should render the field name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    percentCompleted: 30.5,
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Percent Completed');
+        });
+        [
+            'Greater than',
+            'Greater than or equal to',
+            'In',
+            'Is',
+            'Is empty',
+            'Is not empty',
+            'Less than',
+            'Less than or equal to',
+            'Not in',
+            'Is not',
+        ].forEach((operator) => {
+            it(`should offer the ${operator} operator`, async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        percentCompleted: 25.5,
+                    }, setCriteria: setCriteriaMock }));
+                await user.click(screen.getByRole('combobox', { name: /select operator/i }));
+                await screen.findByRole('option', { name: operator });
+            });
+        });
+        describe('when utilizing the "in" operator', () => {
+            it('should allow numbers to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        percentCompleted: { $in: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, '4{Enter}');
+                screen.getByRole('button', { name: '4' });
+            });
+            it('should not allow non-numeric values to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        percentCompleted: { $in: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, 'nonNumericValue{Enter}');
+                expect(screen.queryByText('nonNumericValue')).not.toBeInTheDocument();
+            });
+        });
+        describe('when utilizing the "not in" operator', () => {
+            it('should allow numbers to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: { $nin: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, '4{Enter}');
+                screen.getByRole('button', { name: '4' });
+            });
+            it('should not allow non-numeric values to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: { $nin: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, 'nonNumericValue{Enter}');
+                expect(screen.queryByText('nonNumericValue')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when passed integer fields', () => {
+        it('should render the field name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    age: 25,
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Age');
+        });
+        [
+            'Greater than',
+            'Greater than or equal to',
+            'In',
+            'Is',
+            'Is empty',
+            'Is not empty',
+            'Less than',
+            'Less than or equal to',
+            'Not in',
+            'Is not',
+        ].forEach((operator) => {
+            it(`should offer the ${operator} operator`, async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: 25,
+                    }, setCriteria: setCriteriaMock }));
+                await user.click(screen.getByRole('combobox', { name: /select operator/i }));
+                await screen.findByRole('option', { name: operator });
+            });
+        });
+        describe('when utilizing the "in" operator', () => {
+            it('should allow numbers to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: { $in: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, '4{Enter}');
+                screen.getByRole('button', { name: '4' });
+            });
+            it('should not allow non-numeric values to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: { $in: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, 'nonNumericValue{Enter}');
+                expect(screen.queryByText('nonNumericValue')).not.toBeInTheDocument();
+            });
+        });
+        describe('when utilizing the "not in" operator', () => {
+            it('should allow numbers to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: { $nin: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, '4{Enter}');
+                screen.getByRole('button', { name: '4' });
+            });
+            it('should not allow non-numeric values to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        age: { $nin: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, 'nonNumericValue{Enter}');
+                expect(screen.queryByText('nonNumericValue')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when passed text fields', () => {
+        it('should render the field name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    name: 'John Doe',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Name');
+        });
+        describe('when utilizing the "in" operator', () => {
+            it('should allow custom values to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        name: { $in: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, 'customStatus{Enter}');
+                expect(screen.getByRole('button', { name: 'customStatus' })).toBeInTheDocument();
+            });
+        });
+        describe('when utilizing the "Not in" operator', () => {
+            it('should allow custom values to be entered', async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        name: { $nin: [] },
+                    }, setCriteria: setCriteriaMock }));
+                const valueInput = screen.getByRole('combobox', { name: /select or enter a value/i });
+                await user.click(valueInput);
+                await user.type(valueInput, 'customStatus{Enter}');
+                expect(screen.getByRole('button', { name: 'customStatus' })).toBeInTheDocument();
+            });
+        });
+    });
+    describe('when passed boolean fields', () => {
+        it('should render the field name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    boolean: true,
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Boolean');
+        });
+        ['Is', 'Is not', 'Is empty', 'Is not empty'].forEach((operator) => {
+            it(`should offer the ${operator} operator`, async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        boolean: true,
+                    }, setCriteria: setCriteriaMock }));
+                await user.click(screen.getByRole('combobox', { name: /select operator/i }));
+                await screen.findByRole('option', { name: operator });
+            });
+        });
+        it('should display preloaded value', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    boolean: true,
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select or enter a value/i })).toHaveValue('True');
+        });
+        ['True', 'False'].forEach((value) => {
+            it(`should offer the value ${value}`, async () => {
+                const user = userEvent.setup();
+                render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                        boolean: false,
+                    }, setCriteria: setCriteriaMock }));
+                await user.click(screen.getByRole('combobox', { name: /select or enter a value/i }));
+                await screen.findByRole('option', { name: value });
+            });
+        });
+    });
+    describe('when deleting rules', () => {
+        it('should allow individual rules to be deleted if the delete rule button is pressed', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    status: 'active',
+                }, setCriteria: setCriteriaMock }));
+            const propertySelectBox = screen.getByRole('combobox', { name: /select property/i });
+            const deleteButton = screen.getByRole('button', { name: /delete rule/i });
+            await user.click(deleteButton);
+            expect(propertySelectBox).not.toBeInTheDocument();
+        });
+        it('should remove an entire rule group if the delete group button is pressed', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    $and: [{ $and: [{ status: 'active' }] }],
+                }, setCriteria: setCriteriaMock }));
+            const propertySelectBox = screen.getByRole('combobox', { name: /select property/i });
+            const deleteButton = screen.getByRole('button', { name: /delete group/i });
+            await user.click(deleteButton);
+            expect(propertySelectBox).not.toBeInTheDocument();
+        });
+    });
+});

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

@@ -221,7 +221,10 @@ const ValueEditor = (props) => {
                         })
                             .filter((item) => item !== '');
                         handleOnChange(uniqueSelections.length ? Array.from(new Set(uniqueSelections)) : '');
-                    }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
+                    }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, ...params, size: "small", inputProps: {
+                            ...params.inputProps,
+                            'aria-label': 'Select or enter a value',
+                        } })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: disabled || ['null', 'notNull'].includes(operator), onChange: (e) => {
@@ -240,11 +243,14 @@ const ValueEditor = (props) => {
             const options = [{ label: 'True', value: true }, { label: 'False', value: false }, ...presetValues];
             return (React.createElement(Autocomplete, { options: options, value: options.find((opt) => opt.value === value) ?? value, onChange: (event, newValue) => {
                     handleOnChange(newValue ? newValue.value : '');
-                }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+                }, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, size: "small", ...params, inputProps: {
+                        'aria-label': 'Select or enter a value',
+                        ...params.inputProps,
+                    } })), groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
         }
         else {
-            const isMultiple = inputType === 'array' || isMultipleOperator || values?.length;
-            if (isMultiple) {
+            const isMultiple = inputType === 'array' || isMultipleOperator;
+            if (isMultiple || values?.length) {
                 const options = [...values, ...presetValues];
                 return (React.createElement(Autocomplete, { freeSolo: inputType !== 'array' && fieldData.valueEditorType !== 'select', multiple: isMultiple, options: options, value: isMultiple
                         ? Array.isArray(value)
@@ -263,7 +269,11 @@ const ValueEditor = (props) => {
                         }
                         else {
                             value =
-                                typeof newValue === 'string' ? newValue : newValue.value;
+                                typeof newValue === 'string'
+                                    ? newValue
+                                    : !newValue
+                                        ? newValue
+                                        : newValue.value;
                         }
                         handleOnChange(value);
                     }, onBlur: () => {
@@ -285,7 +295,10 @@ const ValueEditor = (props) => {
                         }
                     }, onInputChange: (event, newInputValue) => {
                         setInputValue(newInputValue);
-                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params.label, ...params, size: "small" })), isOptionEqualToValue: (option, value) => option?.value === value.value, groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
+                    }, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, ...params, size: "small", inputProps: {
+                            ...params.inputProps,
+                            'aria-label': 'Select or enter a value',
+                        } })), isOptionEqualToValue: (option, value) => typeof value === 'string' ? option?.value === value : option?.value === value.value, groupBy: (option) => isPresetValue(option.value) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
             }
             else {
                 return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: styles.input, readOnly: readOnly }));

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

@@ -1,6 +1,6 @@
 import { useObject } from '@evoke-platform/context';
 import { isEmpty, isEqual, omit } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
@@ -12,7 +12,7 @@ import { assignIdsToSectionsAndRichText, convertDocToParameters, convertProperti
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -32,6 +32,7 @@ const FormRendererInternal = (props) => {
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
     const objectStore = useObject(objectId);
+    const validationErrorsRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
             ...prev,
@@ -134,9 +135,17 @@ const FormRendererInternal = (props) => {
             unregister(fieldId);
         }
     };
+    const onSubmitError = (errors) => {
+        if (onSubmitErrorOverride) {
+            onSubmitErrorOverride(errors);
+        }
+        else if (validationErrorsRef.current) {
+            validationErrorsRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
-        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError?.(errors))();
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,
@@ -148,6 +157,7 @@ const FormRendererInternal = (props) => {
         shouldShowValidationErrors: isSubmitted,
         form,
         action,
+        validationErrorsRef: validationErrorsRef,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,

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

@@ -59,6 +59,10 @@ function FormRendererContainer(props) {
                     const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
                     if (action && (instanceId || action.type === 'create')) {
                         setAction(action);
+                        // Clear error if action is found after being missing
+                        // TODO: This entire effect should take place after form is fetched to avoid an error flickering
+                        // That is, this effect should be merged with the one below that fetches the form
+                        setError((prevError) => prevError === 'Action could not be found' ? undefined : prevError);
                     }
                     else {
                         setError('Action could not be found');
@@ -99,7 +103,8 @@ function FormRendererContainer(props) {
             apiServices
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
-                if (evokeForm?.actionId === actionId) {
+                // If an actionId is provided, ensure it matches the form's actionId
+                if (!actionId || evokeForm?.actionId === actionId) {
                     const form = evokeForm;
                     setForm(form);
                 }

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

@@ -6,6 +6,7 @@ import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
     shouldShowValidationErrors: boolean;
+    validationErrorsRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;

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

@@ -6,7 +6,7 @@ import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, form, sx } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationErrorsRef, form, sx } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -25,12 +25,15 @@ const Header = (props) => {
             borderBottom: !form.id ? undefined : '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
+            '.evoke-form-renderer-header': {
+                flex: 1,
+            },
         } },
         title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
             React.createElement(Title, { ...props }))),
         hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
             React.createElement(AccordionActions, { ...props }))),
-        shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null));
+        React.createElement("div", { ref: validationErrorsRef, className: 'evoke-form-renderer-header' }, shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null)));
 };
 // Default slot components for convenience
 export const Title = ({ title }) => (React.createElement(Typography, { sx: {

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

@@ -20,7 +20,7 @@ const WithProviders = ({ children }) => {
     return React.createElement(MemoryRouter, null, children);
 };
 const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
-describe('Form component', () => {
+describe('FormRenderer', () => {
     let server;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
@@ -59,9 +59,9 @@ describe('Form component', () => {
                         npSpecialtyType1,
                         npSpecialtyType2,
                     ]);
-                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] }))
+                else if (isEqual(whereFilter, { 'licenseType.id': 'rnLicenseType' }))
                     return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
-                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
+                else if (isEqual(whereFilter, { 'licenseType.id': 'npLicenseType' }))
                     return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
             }
         }), http.get('/api/accessManagement/users', () => HttpResponse.json(users)));
@@ -657,7 +657,12 @@ describe('Form component', () => {
                     actionId: '_update',
                     objectId: 'relatedObjectTestForm',
                 };
+                let scrollIntoViewMock;
+                let originalScrollIntoView;
                 beforeEach(async () => {
+                    scrollIntoViewMock = vitest.fn();
+                    originalScrollIntoView = Element.prototype.scrollIntoView;
+                    Element.prototype.scrollIntoView = scrollIntoViewMock;
                     const relatedObjectTestFormObject = {
                         id: 'relatedObjectTestForm',
                         name: 'Related Object Test Form',
@@ -694,9 +699,20 @@ describe('Form component', () => {
                                 type: 'content',
                                 html: '<div>Specialty Type Form Content</div>',
                             },
+                            {
+                                type: 'input',
+                                parameterId: 'requiredField',
+                                display: {
+                                    label: 'Required Field',
+                                    required: true,
+                                },
+                            },
                         ],
                         actionId: '_create',
                         objectId: 'specialtyType',
+                        display: {
+                            submitLabel: 'Create Specialty Type',
+                        },
                     };
                     const specialtyTypeObject = {
                         id: 'specialtyType',
@@ -706,7 +722,14 @@ describe('Form component', () => {
                                 id: '_create',
                                 name: 'Create',
                                 type: 'create',
-                                parameters: [],
+                                parameters: [
+                                    {
+                                        id: 'requiredField',
+                                        name: 'Required Field',
+                                        type: 'string',
+                                        required: true,
+                                    },
+                                ],
                                 outputEvent: 'created',
                                 defaultFormId: 'specialtyTypeForm',
                             },
@@ -722,6 +745,9 @@ describe('Form component', () => {
                     };
                     setupTestMocks(specialtyTypeObject, specialtyTypeForm);
                 });
+                afterEach(() => {
+                    Element.prototype.scrollIntoView = originalScrollIntoView;
+                });
                 it('displays an add button for related object fields', async () => {
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     await screen.findByRole('button', { name: 'Add' });
@@ -814,6 +840,63 @@ describe('Form component', () => {
                     await user.click(newRecordButton);
                     await screen.findByText(/not found/i);
                 });
+                it('should show validation errors in record creation mode', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    const errorMessage = await screen.findByRole('listitem');
+                    expect(errorMessage).toHaveTextContent('Required Field is required');
+                });
+                it('should clear validation errors after they have been resolved', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    // Make sure error elements appear
+                    screen.getByRole('listitem');
+                    const requiredField = screen.getByRole('textbox', { name: /Required Field */i });
+                    await user.type(requiredField, 'Some content here...');
+                    expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+                });
+                it('should scroll to validation errors after submission', async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    expect(scrollIntoViewMock).toHaveBeenCalled();
+                });
+                it('should not scroll to validation errors if there are none', async () => async () => {
+                    const user = userEvent.setup();
+                    render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+                    await user.click(await screen.findByRole('button', { name: 'Add' }));
+                    const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+                    await user.click(newRecordButton);
+                    // Make sure error elements appear
+                    screen.getByRole('listitem');
+                    const requiredField = await screen.findByRole('textbox', { name: /Required Field */i });
+                    await user.type(requiredField, 'Some content here...');
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+                });
             });
         });
         describe('when in dropdown view', () => {
@@ -1050,7 +1133,12 @@ describe('Form component', () => {
             actionId: '_update',
             objectId: 'testObjectForCollections',
         };
+        let scrollIntoViewMock;
+        let originalScrollIntoView;
         beforeEach(() => {
+            scrollIntoViewMock = vitest.fn();
+            originalScrollIntoView = Element.prototype.scrollIntoView;
+            Element.prototype.scrollIntoView = scrollIntoViewMock;
             const collectionFormObject = {
                 id: 'testObjectForCollections',
                 name: 'Object for one-to-many collections tests',
@@ -1120,6 +1208,7 @@ describe('Form component', () => {
                         parameterId: 'name',
                         display: {
                             label: 'Name',
+                            required: true,
                         },
                     },
                     {
@@ -1133,9 +1222,15 @@ describe('Form component', () => {
                 ],
                 actionId: '_create',
                 objectId: 'collectionObject',
+                display: {
+                    submitLabel: 'Create Collection Item',
+                },
             };
             setupTestMocks(collectionObject, collectionObjectForm);
         });
+        afterEach(() => {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        });
         it('should render collection field', async () => {
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
             await screen.findByText('Collection');
@@ -1194,7 +1289,7 @@ describe('Form component', () => {
             const user = userEvent.setup();
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
             await user.click(await screen.findByRole('button', { name: 'Add' }));
-            await screen.findByRole('button', { name: 'Submit' });
+            await screen.findByRole('button', { name: 'Create Collection Item' });
         });
         it('should hide related object field in collection item form', async () => {
             const user = userEvent.setup();
@@ -1203,7 +1298,7 @@ describe('Form component', () => {
             await user.click(addButton);
             await screen.findByRole('dialog');
             // Make sure other form entry is present
-            await screen.findByRole('textbox', { name: 'Name' });
+            await screen.findByRole('textbox', { name: 'Name *' });
             const relatedObjectField = screen.queryByRole('textbox', { name: 'Related Object' });
             expect(relatedObjectField).not.toBeInTheDocument();
         });
@@ -1222,12 +1317,136 @@ describe('Form component', () => {
             const addButton = await screen.findByRole('button', { name: /add/i });
             await user.click(addButton);
             await screen.findByRole('dialog');
-            const nameField = screen.getByRole('textbox', { name: 'Name' });
+            const nameField = screen.getByRole('textbox', { name: 'Name *' });
             await user.type(nameField, 'New Collection Item');
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
             await user.click(submitButton);
             await screen.findByRole('columnheader', { name: 'Name' });
             screen.getByRole('cell', { name: 'New Collection Item' });
         });
+        it('should show validation errors', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            const errorMessage = await screen.findByRole('listitem');
+            expect(errorMessage).toHaveTextContent('Name is required');
+        });
+        it('should hide validation errors after they have been resolved', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            // Make sure error elements appear
+            screen.getByRole('listitem');
+            const requiredField = screen.getByRole('textbox', { name: /Name */i });
+            await user.type(requiredField, 'Some content here...');
+            expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+        });
+        it('should scroll to validation errors on submit', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('should not scroll to validation errors if there are none', async () => async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const requiredField = await screen.findByRole('textbox', { name: /Name */i });
+            await user.type(requiredField, 'Some content here...');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when passed a text field entry', () => {
+        it('should render text field', async () => {
+            const form = {
+                id: 'textFieldTestForm',
+                name: 'Text Field Test Form',
+                entries: [
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'textField',
+                            type: 'string',
+                        },
+                        display: {
+                            label: 'Text Field',
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'textFieldTestObject',
+            };
+            const textFieldTestObject = {
+                id: 'textFieldTestObject',
+                name: 'Text Field Test Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/${textFieldTestObject.id}/effective`, () => HttpResponse.json(textFieldTestObject)));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByRole('textbox', { name: 'Text Field' });
+        });
+        it('should allow text input in text field', async () => {
+            const user = userEvent.setup();
+            const form = {
+                id: 'textFieldTestForm',
+                name: 'Text Field Test Form',
+                entries: [
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'textField',
+                            type: 'string',
+                        },
+                        display: {
+                            label: 'Text Field',
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'textFieldTestObject',
+            };
+            const textFieldTestObject = {
+                id: 'textFieldTestObject',
+                name: 'Text Field Test Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/${textFieldTestObject.id}/effective`, () => HttpResponse.json(textFieldTestObject)));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const textField = await screen.findByRole('textbox', { name: 'Text Field' });
+            await user.type(textField, 'Test Input');
+            expect(textField).toHaveValue('Test Input');
+        });
     });
 });

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

@@ -1,5 +1,5 @@
 import * as matchers from '@testing-library/jest-dom/matchers';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { render as baseRender, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEqual } from 'lodash';
 import { http, HttpResponse } from 'msw';
@@ -16,14 +16,11 @@ global.ResizeObserver = class ResizeObserver {
     unobserve() { }
     disconnect() { }
 };
-const removePoppers = () => {
-    const portalSelectors = ['.MuiAutocomplete-popper'];
-    portalSelectors.forEach((selector) => {
-        // eslint-disable-next-line testing-library/no-node-access
-        document.querySelectorAll(selector).forEach((el) => el.remove());
-    });
+const WithProviders = ({ children }) => {
+    return React.createElement(MemoryRouter, null, children);
 };
-describe('Form component', () => {
+const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
+describe('FormRendererContainer', () => {
     let server;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
@@ -71,7 +68,6 @@ describe('Form component', () => {
     });
     afterEach(() => {
         server.resetHandlers();
-        removePoppers();
     });
     describe('validation criteria', () => {
         it(`filters related object field with validation criteria that references a defaulted related object's nested data`, async () => {
@@ -81,13 +77,11 @@ describe('Form component', () => {
             }), http.get('/api/data/forms/specialtyForm', () => {
                 return HttpResponse.json(createSpecialtyForm);
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } }));
             // Validate that the license field is hidden
             await waitFor(() => expect(screen.queryByRole('combobox', { name: 'License' })).not.toBeInTheDocument());
             // Validate that specialty type dropdown is only rendering specialty types that are associated with the selected license.
             const specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
-            await new Promise((r) => setTimeout(r, 5000));
             await user.click(specialtyType);
             const openAutocomplete = await screen.findByRole('listbox');
             await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
@@ -100,4 +94,200 @@ describe('Form component', () => {
             });
         });
     });
+    it('should display a submit button', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        await screen.findByRole('button', { name: 'Submit' });
+    });
+    it('should display a button to discard changes', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        await screen.findByRole('button', { name: 'Discard Changes' });
+    });
+    it('should reset the form when discarding changes', async () => {
+        const form = {
+            id: 'simpleForm2',
+            name: 'Simple Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'firstName',
+                        type: 'string',
+                    },
+                    display: {
+                        label: 'First Name',
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'simpleObject2',
+        };
+        const simpleObject = {
+            id: 'simpleObject2',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'firstName',
+                    name: 'First Name',
+                    type: 'string',
+                },
+            ],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        const user = userEvent.setup();
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        const firstNameInput = await screen.findByRole('textbox', { name: 'First Name' });
+        await user.type(firstNameInput, 'John');
+        const discardButton = await screen.findByRole('button', { name: 'Discard Changes' });
+        await user.click(discardButton);
+        await waitFor(() => expect(firstNameInput).toHaveValue(''));
+    });
+    describe('when submitting a form with validation', () => {
+        const form = {
+            id: 'validationTestForm',
+            name: 'Validation Test Form',
+            entries: [
+                {
+                    type: 'input',
+                    parameterId: 'requiredField',
+                    display: {
+                        label: 'Required Field',
+                        required: true,
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'validationTestObject',
+        };
+        let scrollIntoViewMock;
+        let originalScrollIntoView;
+        beforeEach(() => {
+            scrollIntoViewMock = vitest.fn();
+            originalScrollIntoView = Element.prototype.scrollIntoView;
+            Element.prototype.scrollIntoView = scrollIntoViewMock;
+        });
+        afterEach(() => {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        });
+        const validationTestObject = {
+            id: 'validationTestObject',
+            name: 'Validation Test Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [
+                        {
+                            id: 'requiredField',
+                            name: 'Required Field',
+                            type: 'string',
+                            required: true,
+                        },
+                    ],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'requiredField',
+                    name: 'Required Field',
+                    type: 'string',
+                },
+            ],
+        };
+        beforeEach(() => {
+            server.use(http.get(`/api/data/objects/${validationTestObject.id}/effective`, () => HttpResponse.json(validationTestObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        });
+        it('should display validation errors after trying to submit the form', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            // List items are named by author, but they don't
+            // need to be given an accessible name here because their text content is clear enough.
+            // As such, we use getByRole and ensure it has the correct text
+            const errorMessage = await screen.findByRole('listitem');
+            expect(errorMessage).toHaveTextContent('Required Field is required');
+        });
+        it('should clear validation errors after they have been resolved', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            // Make sure error elements appear
+            screen.getByRole('listitem');
+            const requiredField = screen.getByRole('textbox', { name: /Required Field */i });
+            await user.type(requiredField, 'Some content here...');
+            expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+        });
+        it('should scroll to validation errors after submission', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('should not scroll to validation errors after submission if there are none', async () => {
+            const user = userEvent.setup();
+            server.use(http.post(`/api/data/objects/${validationTestObject.id}/instances/actions`, () => HttpResponse.json({}, { status: 200 })));
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const requiredField = await screen.findByRole('textbox', { name: /Required Field */i });
+            await user.type(requiredField, 'Some content here...');
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-dev.6",
+    "version": "1.10.0-dev.8",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -20,6 +20,7 @@
     "scripts": {
         "test": "vitest",
         "test:ui": "vitest --ui",
+        "test:preview": "vitest-preview",
         "copy-styles": "copyfiles -u 1 src/styles/*.css dist/published/",
         "build": "rm -rf ./dist && tsc && npm run copy-styles",
         "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
@@ -88,6 +89,7 @@
         "storybook": "^7.6.20",
         "typescript": "^4.7.3",
         "vitest": "^1.6.0",
+        "vitest-preview": "^0.0.3",
         "webpack": "^5.74.0",
         "yalc": "^1.0.0-pre.53"
     },