@evoke-platform/ui-components 1.6.0-testing.12 → 1.6.0-testing.14

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

@@ -1,11 +1,10 @@
-import { Property } from '@evoke-platform/context';
 import React from 'react';
 import 'react-querybuilder/dist/query-builder.css';
 import { EvokeObject } from '../../../types';
-import { Operator, PresetValue, TreeViewObject } from './types';
+import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
-    properties: Property[];
+    properties: ObjectProperty[];
     setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
     criteria?: Record<string, unknown>;
     originalCriteria?: Record<string, unknown>;

package/dist/published/components/custom/FormField/AddressFieldComponent/AddressFieldComponent.test.js

@@ -8,7 +8,7 @@ import AddressFieldComponent from './addressFieldComponent';
 const addressProperty = {
     id: 'addressLine1',
     name: 'Line 1',
-    type: 'string',
+    type: 'text',
 };
 it('displays matching addresses', async () => {
     const user = userEvent.setup();

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -45,7 +45,7 @@ const AddressFieldComponent = (props) => {
         setAnchorEl(null);
     };
     return (React.createElement(Box, null,
-        !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder, InputProps: {
+        !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
             }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly

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

@@ -56,12 +56,12 @@ const BooleanSelect = (props) => {
         return readOnlyComponent();
     }
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
-        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
+        React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                } })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
-                } })) }),
+                }, ...(additionalProps ?? {}) })) }),
         error && errorMessage?.length && React.createElement(FormHelperText, { sx: { marginX: 0 } }, errorMessage),
         descriptionComponent()));
 };

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

@@ -1,4 +1,5 @@
 import { DateTimeFormatter } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
@@ -36,6 +37,11 @@ const DatePickerSelect = (props) => {
         onChange && onChange(property.id, date, property);
     };
     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', ...(additionalProps ?? {}) })) })));
+        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', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DatePickerSelect;

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

@@ -1,4 +1,5 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
+import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
@@ -43,6 +44,11 @@ const DateTimePickerSelect = (props) => {
         props.onChange && props.onChange(property.id, date, property);
     };
     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', ...(additionalProps ?? {}) })) })));
+        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', 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })) })));
 };
 export default DateTimePickerSelect;

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -1,10 +1,11 @@
-import { Property, SelectOption } from '@evoke-platform/context';
+import { SelectOption } from '@evoke-platform/context';
 import React, { FocusEventHandler, ReactNode } from 'react';
+import { ObjectProperty } from '../../../types';
 import { AutocompleteOption } from '../../core';
 import { Address } from './AddressFieldComponent/addressFieldComponent';
 export type FormFieldProps = {
     id?: string;
-    property: Property;
+    property: ObjectProperty;
     onChange?: Function;
     onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     defaultValue?: unknown;

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

@@ -36,9 +36,12 @@ const InputFieldComponent = (props) => {
         setInputValue(selectValue);
     };
     const InputProps = property.type === 'number'
-        ? { inputComponent: NumericFormat, inputProps: { min, max, readOnly } }
+        ? {
+            inputComponent: NumericFormat,
+            inputProps: { min, max, readOnly, ...(additionalProps?.inputProps ?? {}) },
+        }
         : property.type === 'integer'
-            ? { inputProps: { min, max } }
+            ? { inputProps: { min, max, ...(additionalProps?.inputProps ?? {}) } }
             : null;
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, 
         // note: this is different between widgets and builder
@@ -62,7 +65,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
-        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',

package/dist/published/components/custom/FormField/Select/Select.test.js

@@ -11,28 +11,23 @@ describe('Single select', () => {
     const choiceProperty = {
         id: 'selectOptions',
         name: 'Select Options',
-        type: 'string',
+        type: 'choices',
     };
     it('returns selected option', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         const option2 = await screen.findByRole('option', { name: 'option 2' });
         await user.click(option2);
-        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), {
-            id: 'selectOptions',
-            name: 'Select Options',
-            type: 'string',
-            enum: ['option 1', 'option 2', 'option 3'],
-        });
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'option 2', value: 'option 2' }), choiceProperty);
     });
     it('displays matching options', async () => {
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'something different'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, onChange: () => { } }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: () => { } }));
         const input = screen.getByRole('combobox');
         await user.type(input, 'option');
         await screen.findByRole('option', { name: 'option 1' });
@@ -45,7 +40,7 @@ describe('Single select', () => {
         { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
     ])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
         const options = ['option 2', 'option 1', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: vi.fn() }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: vi.fn() }));
         const user = userEvent.setup();
         const input = screen.getByRole('combobox');
         await user.click(input);
@@ -57,7 +52,7 @@ describe('Single select', () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         // Verify the instruction text for a combobox displays as the sub-header of the combobox.
@@ -66,12 +61,7 @@ describe('Single select', () => {
         // Verify the option to add the custom value is displayed as an available option in the dropdown.
         const customOption = await screen.findByRole('option', { name: 'Add "custom option"' });
         await user.click(customOption);
-        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), {
-            id: 'selectOptions',
-            name: 'Select Options',
-            type: 'string',
-            enum: ['option 1', 'option 2', 'option 3'],
-        });
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), choiceProperty);
     });
 });
 describe('Multi select', () => {
@@ -86,7 +76,7 @@ describe('Multi select', () => {
         const user = userEvent.setup();
         const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...multiChoiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock }));
+        render(React.createElement(Select, { id: "testSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         const option2 = await screen.findByRole('option', { name: 'option 2' });
@@ -96,18 +86,13 @@ describe('Multi select', () => {
         const option3 = await screen.findByRole('option', { name: 'option 3' });
         await user.click(option3);
         expect(onChangeMock).toBeCalledTimes(2);
-        expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], {
-            id: 'multiSelect',
-            name: 'Select Multiple',
-            type: 'array',
-            enum: ['option 1', 'option 2', 'option 3'],
-        });
+        expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
     });
     it('allows the user to enter custom values if it is combobox component', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "multiSelect", property: { ...multiChoiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         // Verify the instruction text for a combobox displays as the sub-header of the combobox.
@@ -119,18 +104,13 @@ describe('Multi select', () => {
         const customOption2 = await screen.findByRole('option', { name: 'Add "custom option 2"' });
         await user.click(customOption2);
         expect(onChangeMock).toBeCalledTimes(2);
-        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'custom option 2'], {
-            id: 'multiSelect',
-            name: 'Select Multiple',
-            type: 'array',
-            enum: ['option 1', 'option 2', 'option 3'],
-        });
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'custom option 2'], multiChoiceProperty);
     });
     it('allows the user to enter custom values in conjunction with the predefined options if it is combobox component', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "multiSelect", property: { ...multiChoiceProperty, enum: options }, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
         const input = screen.getByRole('combobox');
         await user.click(input);
         // Verify the instruction text for a combobox displays as the sub-header of the combobox.
@@ -142,19 +122,14 @@ describe('Multi select', () => {
         const option1 = await screen.findByRole('option', { name: 'option 1' });
         await user.click(option1);
         expect(onChangeMock).toBeCalledTimes(2);
-        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], {
-            id: 'multiSelect',
-            name: 'Select Multiple',
-            type: 'array',
-            enum: ['option 1', 'option 2', 'option 3'],
-        });
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], multiChoiceProperty);
     });
 });
 describe('Radio Single select', () => {
     const choiceProperty = {
         id: 'selectOptions',
         name: 'Select Options',
-        type: 'string',
+        type: 'choices',
     };
     it('returns selected radio option', async () => {
         const user = userEvent.setup();
@@ -171,7 +146,7 @@ describe('Radio Single select', () => {
         { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
     ])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
         const options = ['option 2', 'option 1', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: vi.fn() }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: vi.fn() }));
         const radioButtons = screen.getAllByRole('radio');
         const radioValues = radioButtons.map((radioButton) => radioButton.value);
         expect(radioValues).toEqual(expectedValues);
@@ -179,7 +154,7 @@ describe('Radio Single select', () => {
     it('renders an "Other" option in the radio group if the component is configured to support a custom value', async () => {
         const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
-        render(React.createElement(Select, { id: "testSelect", property: { ...choiceProperty, enum: options }, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
         await screen.findByRole('radio', { name: 'Other' });
     });
     it('renders a text field for a custom option if the "Other" option is selected', async () => {

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

@@ -1,9 +1,11 @@
 import { LocalDateTime } from '@js-joda/core';
 import { TimePicker } from '@mui/x-date-pickers';
-import { isUndefined, padStart } from 'lodash';
+import { isUndefined, omit, padStart } from 'lodash';
+import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
 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 values = defaultValue ? defaultValue.split(':') : undefined;
@@ -39,7 +41,15 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
-    return (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, readOnly: readOnly, ...(additionalProps ?? {}) })), readOnly: readOnly })));
+    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, 
+                // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
+                inputProps: {
+                    ...params.inputProps,
+                    ...(additionalProps?.inputProps ?? {}),
+                }, ...omit(additionalProps, ['inputProps']) })), readOnly: readOnly })));
 };
 export default TimePickerSelect;

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

@@ -0,0 +1,19 @@
+import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
+import React, { ComponentType } from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { BaseProps, DocumentInstance, SimpleEditorProps } from './components/types';
+export type FormProps = BaseProps & {
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    hideButtons?: boolean;
+    value?: FieldValues;
+    onSubmit?: (data: FieldValues) => void;
+    fieldHeight?: 'small' | 'medium';
+    stickyFooter?: boolean;
+    onCancel?: () => void;
+    form: EvokeForm;
+    instance?: ObjectInstance | DocumentInstance;
+    onChange: (id: string, value: unknown) => void;
+    onValidationChange?: (errors: FieldErrors) => void;
+};
+declare function FormRenderer(props: FormProps): React.JSX.Element;
+export default FormRenderer;

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

@@ -0,0 +1,183 @@
+import { useObject } from '@evoke-platform/context';
+import { isEqual } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useResponsive } from '../../../theme';
+import { Button, Skeleton, Typography } from '../../core';
+import { Box } from '../../layout';
+import ActionButtons from './components/ActionButtons';
+import { FormContext } from './components/FormContext';
+import { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
+import { convertDocToParameters, convertPropertiesToParams } from './components/utils';
+import { handleValidation } from './components/ValidationFiles/Validation';
+import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
+function FormRenderer(props) {
+    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, } = props;
+    const { entries, name: title, objectId, actionId, display } = form;
+    const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
+        defaultValues: value,
+    });
+    const hasSections = entries.some((entry) => entry.type === 'sections');
+    const isModal = !!document.querySelector('.MuiDialog-container');
+    const { isSm, isXs, smallerThan } = useResponsive();
+    const isSmallerThanMd = smallerThan('md');
+    const objectStore = useObject(objectId);
+    const [expandedSections, setExpandedSections] = useState([]);
+    const [fetchedOptions, setFetchedOptions] = useState({});
+    const [expandAll, setExpandAll] = useState();
+    const [action, setAction] = useState();
+    const [object, setObject] = useState();
+    const [triggerFieldReset, setTriggerFieldReset] = useState(false);
+    const updateFetchedOptions = (newData) => {
+        setFetchedOptions((prev) => ({
+            ...prev,
+            ...newData,
+        }));
+    };
+    function handleExpandAll() {
+        setExpandAll(true);
+    }
+    function handleCollapseAll() {
+        setExpandAll(false);
+    }
+    useEffect(() => {
+        (async () => {
+            try {
+                const object = await objectStore.get({ sanitized: true });
+                setObject(object);
+                if (actionId) {
+                    const action = object?.actions?.find((a) => a.id === actionId);
+                    setAction(action);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch object or action:', error);
+            }
+        })();
+    }, [objectStore, actionId]);
+    useEffect(() => {
+        const currentValues = getValues();
+        if (value) {
+            for (const key of Object.keys(currentValues)) {
+                if (!isEqual(currentValues[key], value[key])) {
+                    setValue(key, value[key], { shouldValidate: true });
+                }
+            }
+            if (triggerFieldReset === true) {
+                setTriggerFieldReset(false);
+            }
+        }
+    }, [value]);
+    useEffect(() => {
+        if (onValidationChange) {
+            onValidationChange(errors);
+        }
+    }, [errors, onValidationChange]);
+    const handleReset = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            reset(instance); // clears react-hook-form state back to default values
+        }
+        setTriggerFieldReset(true);
+    };
+    const parameters = useMemo(() => {
+        if (form.id === 'documentForm') {
+            return convertDocToParameters(instance);
+        }
+        else if (action?.parameters) {
+            return action.parameters;
+        }
+        else if (object) {
+            // if forms actionId is synced with object properties
+            return convertPropertiesToParams(object);
+        }
+    }, [form.id, action?.parameters, object, instance]);
+    useEffect(() => {
+        handleValidation(entries, register, getValues(), action?.parameters, instance);
+    }, []);
+    if (entries && parameters && (!actionId || action)) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Box, { sx: {
+                    paddingX: isSmallerThanMd ? 2 : 3,
+                    paddingTop: '0px',
+                    borderBottom: '2px solid #F4F6F8',
+                } },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        paddingY: isSm || isXs ? 2 : 3,
+                    } },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '20px',
+                            lineHeight: '30px',
+                            fontWeight: 700,
+                            flexGrow: '1',
+                        } }, title),
+                    isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            maxHeight: '22px',
+                        } },
+                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === true), sx: {
+                                color: '#212B36',
+                                borderRight: '1px solid #e5e8eb',
+                                borderRadius: '0px',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                                fontWeight: 400,
+                                fontSize: '14px',
+                            }, onClick: handleExpandAll }, "Expand all"),
+                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === false), sx: {
+                                color: '#212B36',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                                fontWeight: 400,
+                                fontSize: '14px',
+                            }, onClick: handleCollapseAll }, "Collapse all")))),
+                React.createElement(ValidationErrorDisplay, { errors: errors, show: !!(isSubmitted && errors), formId: form.id, title: title })),
+            React.createElement(FormContext.Provider, { value: {
+                    fetchedOptions,
+                    setFetchedOptions: updateFetchedOptions,
+                    getValues,
+                    stickyFooter,
+                    object,
+                } },
+                React.createElement(Box, { sx: {
+                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
+                        paddingBottom: '0px',
+                        paddingTop: !hasSections ? undefined : '0px',
+                    } },
+                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters }))),
+                    !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
+                            ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
+                            bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
+                            zIndex: 1000,
+                            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+                            backgroundColor: '#fff',
+                            paddingY: isSmallerThanMd ? '16px' : '20px',
+                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            display: 'flex',
+                            justifyContent: isXs ? 'center' : 'flex-end',
+                            alignItems: 'center',
+                            marginX: isSmallerThanMd ? -2 : -3,
+                            marginBottom: '1px',
+                            borderRadius: '0px 0px 6px 6px',
+                        } },
+                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, errors: errors, unregister: unregister, entries: entries, setValue: setValue, formId: form.id, instance: instance })))))));
+    }
+    else {
+        return (React.createElement(Box, { p: 2 },
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null)));
+    }
+}
+export default FormRenderer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SectionsProps } from './types';
+declare function AccordionSections(props: SectionsProps): React.JSX.Element;
+export default AccordionSections;