@evoke-platform/ui-components 1.10.0-testing.1 → 1.10.0-testing.11

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/Form/utils.js

@@ -784,6 +784,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                     item.autoSave = autoSave;
                     item.apiServices = objectPropertyInputProps?.apiServices;
                     item.user = objectPropertyInputProps?.user;
+                    item.setSnackbarError = objectPropertyInputProps?.setSnackbarError;
                     item.defaultPages = defaultPages;
                     item.navigateTo = navigateTo;
                     item.allCriteriaInputs = allCriteriaInputs;

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.d.ts

@@ -24,8 +24,6 @@ export type FormRendererContainerProps = BaseProps & {
         fieldHeight?: 'small' | 'medium';
     };
     actionId?: string;
-    stickyFooter?: boolean;
-    hideButtons?: boolean;
     objectId: string;
     richTextEditor?: ComponentType<SimpleEditorProps>;
     onSubmit?: (submission: Record<string, unknown>, defaultSubmitHandler: (submission: Record<string, unknown>) => Promise<void>) => Promise<void>;

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);
                 }
@@ -245,8 +250,8 @@ function FormRendererContainer(props) {
             else if (action?.type === 'create') {
                 const response = await apiServices.post(getPrefixedUrl(`/objects/${form.objectId}/instances/actions`), {
                     actionId: form.actionId,
-                    input: pick(submission, sanitizedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(submission, sanitizedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (response) {
@@ -256,8 +261,8 @@ function FormRendererContainer(props) {
             else if (instanceId && action) {
                 const response = await objectStore.instanceAction(instanceId, {
                     actionId: action.id,
-                    input: pick(submission, sanitizedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(submission, sanitizedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (sanitizedObject && instance) {

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

@@ -22,6 +22,7 @@ export const Footer = (props) => {
             alignItems: 'center',
             borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
             borderRadius: '0px 0px 6px 6px',
+            zIndex: 3,
             ...sx,
         } },
         React.createElement(FooterActions, { ...props })));

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -87,7 +87,7 @@ export const ActionDialog = (props) => {
                     borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef',
                 } },
                 action && hasAccess && !loading ? action?.name : '',
-                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose, "aria-label": "Close" },
                     React.createElement(Close, { fontSize: "small" })),
                 formHeaderProps.hasAccordions && React.createElement(AccordionActions, { ...formHeaderProps })));
         }, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts

@@ -6,9 +6,6 @@ export type ObjectPropertyInputProps = {
     criteria?: object;
     viewLayout?: ViewLayoutEntityReference;
     entry: InputField | InputParameterReference | ReadonlyField;
-    createActionId?: string;
-    updateActionId?: string;
-    deleteActionId?: string;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
 export default RepeatableField;