@evoke-platform/ui-components 1.10.0-testing.7 → 1.10.0-testing.9

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/tests/FormRenderer.test.js

@@ -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)));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-testing.7",
+    "version": "1.10.0-testing.9",
     "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"
     },