@evoke-platform/ui-components 1.10.0-testing.2 → 1.10.0-testing.20

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/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -430,7 +430,7 @@ const RepeatableField = (props) => {
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (relatedInstances.find((i) => i.id === selectedRow) ?? {}) : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
+            objectInputCommonProps: { apiServices, setSnackbarError }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: property.relatedPropertyId }
                 : undefined, richTextEditor: richTextEditor })),

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/FormField/DatePickerSelect/DatePickerSelect.js

@@ -1,6 +1,7 @@
 import { DateTimeFormatter } from '@js-joda/core';
 import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
@@ -29,6 +30,7 @@ const asMonthDayYearFormat = (date) => {
 const DatePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, onChange, additionalProps, } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const { onAutosave } = useFormContext();
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
@@ -36,8 +38,19 @@ const DatePickerSelect = (props) => {
         setValue(date);
         onChange && onChange(property.id, date, property);
     };
+    const handleAccept = async () => {
+        // Trigger autosave when date is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+        React.createElement(DatePicker, { value: value, onChange: handleChange, onAccept: handleAccept, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

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

@@ -1,6 +1,7 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
 import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
@@ -30,6 +31,7 @@ const formatDateTime = (date) => {
 const DateTimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, additionalProps } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const { onAutosave } = useFormContext();
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
@@ -43,8 +45,19 @@ const DateTimePickerSelect = (props) => {
         setValue(date);
         props.onChange && props.onChange(property.id, date, property);
     };
+    const handleAccept = async () => {
+        // Trigger autosave when date/time is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+        React.createElement(DateTimePicker, { value: value, onChange: handleChange, onAccept: handleAccept, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

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

@@ -3,11 +3,13 @@ import { TimePicker } from '@mui/x-date-pickers';
 import { isUndefined, omit, padStart } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
+    const { onAutosave } = useFormContext();
     const values = defaultValue ? defaultValue.split(':') : undefined;
     const hour = values ? parseInt(values[0]) : undefined;
     const minute = values ? parseInt(values[1]) : undefined;
@@ -41,11 +43,22 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
+    const handleAccept = async () => {
+        // Trigger autosave when time is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{
             ...props,
             defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
         } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
+        React.createElement(TimePicker, { value: value, onChange: handleChange, onAccept: handleAccept, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

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

@@ -16,7 +16,8 @@ export type FormRendererProps = BaseProps & {
     form: EvokeForm;
     title?: string | React.ReactNode;
     instance?: ObjectInstance | Document;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     associatedObject?: {
         instanceId?: string;
         propertyId?: string;