@evoke-platform/ui-components 1.1.0-testing.9 → 1.2.0-testing.0

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

@@ -394,8 +394,7 @@ const CriteriaBuilder = (props) => {
             setCriteria(newCriteria);
         }
         else {
-            if (q.rules.length === 0)
-                setCriteria(undefined);
+            setCriteria(undefined);
         }
     };
     const fields = useMemo(() => {

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

@@ -3,6 +3,7 @@ import { ClearRounded } from '@mui/icons-material';
 import { Box, darken, lighten, styled } from '@mui/material';
 import { TimePicker } from '@mui/x-date-pickers';
 import React, { useEffect, useRef, useState } from 'react';
+import { InvalidDate } from '../../../util';
 import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
 import { NumericFormat } from '../FormField/InputFieldComponent';
 const GroupHeader = styled('div')(({ theme }) => ({
@@ -32,6 +33,7 @@ const ValueEditor = (props) => {
             }));
         }
     }
+    const [invalidDateTime, setInvalidDateTime] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const inputRef = useRef(null);
     const [openPresetValues, setOpenPresetValues] = useState(false);
@@ -82,12 +84,47 @@ const ValueEditor = (props) => {
     const groupRenderGroup = (params) => (React.createElement("li", { key: params.key },
         React.createElement(GroupHeader, null, params.group),
         React.createElement(GroupItems, null, params.children)));
-    function parseISOStringToLocalDateTime(value) {
+    function validateDateTime(value) {
         if (!value) {
             return null;
         }
-        const d = new Date(value);
-        return LocalDateTime.ofInstant(Instant.ofEpochMilli(d.getTime()), ZoneId.systemDefault());
+        // check if it's an ISO string
+        const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z$/;
+        if (isoRegex.test(value)) {
+            try {
+                const instant = Instant.parse(value);
+                return LocalDateTime.ofInstant(instant, ZoneId.systemDefault());
+            }
+            catch (error) {
+                console.error('Error parsing ISO string:', error);
+            }
+        }
+        return new InvalidDate(value);
+    }
+    // Prevents the RangeError issue on keyboard input by returning an empty string for invalid dates
+    // lets users type partial dates without crashing the component during the input process.
+    function convertToISOString(date) {
+        if (!date) {
+            return '';
+        }
+        try {
+            if (date instanceof InvalidDate) {
+                return '';
+            }
+            if (date instanceof LocalDateTime) {
+                return new Date(date.toString()).toISOString();
+            }
+            if (date instanceof LocalDate) {
+                // Convert LocalDate to LocalDateTime to avoid HourOfDay error
+                const dateTime = LocalDateTime.of(date, LocalTime.of(0));
+                return new Date(dateTime.toString()).toISOString();
+            }
+            return '';
+        }
+        catch (error) {
+            console.error('Error converting date to ISO string:', error);
+            return '';
+        }
     }
     const getEditor = () => {
         if (isPresetValueSelected) {
@@ -106,26 +143,44 @@ const ValueEditor = (props) => {
                 React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: styles.input })), readOnly: readOnly })));
         }
         else if (inputType === 'date-time') {
-            const dateTimeValue = parseISOStringToLocalDateTime(value);
+            const dateTimeValue = validateDateTime(value);
             return (React.createElement(LocalizationProvider, null,
                 React.createElement(DateTimePicker, { inputRef: inputRef, value: dateTimeValue, onChange: (date) => {
                         if (!date) {
                             handleOnChange('');
+                            setInvalidDateTime(false);
                             return;
                         }
-                        let localDateTime;
-                        if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
-                            // onChange initially returns a LocalDate after date is selected
-                            localDateTime = LocalDateTime.of(date, LocalTime.of(0));
+                        if (date instanceof InvalidDate) {
+                            setInvalidDateTime(true);
+                            return;
                         }
-                        else {
-                            localDateTime = date;
+                        try {
+                            let localDateTime;
+                            if (date instanceof LocalDate && !(date instanceof LocalDateTime)) {
+                                // onChange initially returns a LocalDate after date is selected
+                                localDateTime = LocalDateTime.of(date, LocalTime.of(0));
+                            }
+                            else {
+                                localDateTime = date;
+                            }
+                            const isoString = convertToISOString(localDateTime);
+                            if (isoString) {
+                                setInvalidDateTime(false);
+                                handleOnChange(isoString);
+                            }
+                            else {
+                                setInvalidDateTime(true);
+                            }
+                        }
+                        catch (error) {
+                            console.error('Error processing date value:', error);
+                            setInvalidDateTime(true);
                         }
-                        handleOnChange(new Date(localDateTime.toString()).toISOString());
                     }, onClose: onClose, PopperProps: {
                         anchorEl,
                     }, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
-                        React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
+                        React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef, error: invalidDateTime }))), readOnly: readOnly })));
         }
         else if (inputType === 'number' || inputType === 'integer') {
             const isMultiple = ['in', 'notIn'].includes(operator);

package/dist/published/components/custom/Form/Common/Form.d.ts

@@ -2,40 +2,77 @@ import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/c
 import { ReactComponent } from '@formio/react';
 import React from 'react';
 import '../../../../styles/form-component.css';
-import { Document, ObjectPropertyInputProps } from '../types';
+import { Address, Document, ObjectPropertyInputProps } from '../types';
 type OnSaveResponse = {
     isSuccessful: boolean;
     error?: Record<string, unknown>;
 };
 export type FormProps = {
-    formKey?: number;
-    object?: Obj;
-    instance?: ObjectInstance;
-    document?: Document;
-    user?: UserAccount;
-    onSave?: (data: Record<string, unknown>, setSubmitting?: (value: boolean) => void) => Promise<OnSaveResponse>;
-    submitButtonLabel?: string;
-    isReadOnly?: boolean;
-    apiServices?: ApiServices | undefined;
-    navigateTo?: (path: string) => void;
-    closeModal?: () => void;
-    clearable?: boolean;
-    objectInputCommonProps?: ObjectPropertyInputProps;
+    /** An optional identifier for the action associated with the form. */
     actionId?: string;
-    onAutoSave?: (data: Record<string, unknown>) => Promise<{
-        isSuccessful: boolean;
-        error?: Record<string, unknown>;
-    }>;
+    /** The type of action associated with the form. */
     actionType?: string;
+    /** Optional API services for the form. */
+    apiServices?: ApiServices | undefined;
+    /** An object representing an associated object with optional `instanceId` and `propertyId` properties. */
     associatedObject?: {
         instanceId?: string;
         propertyId?: string;
     };
-    queryAddresses?: unknown;
+    /**
+     * Whether the form can be cleared.
+     * @default false
+     * */
+    clearable?: boolean;
+    /** An optional document related to the form. */
+    document?: Document;
+    /** Defines the height of the fields in the form. */
     fieldHeight?: 'small' | 'medium';
+    /** An optional unique identifier for the form instance. */
+    formKey?: number;
+    /**
+     * A reference to the form for direct manipulation.
+     * i.e: formRef.current.submit({data: formRef.current.data}, 'submit', (error?: Record<string, unknown>) => {...}, (value: boolean) => {...})
+     * */
+    formRef?: React.MutableRefObject<FormRef | undefined>;
+    /** A React component used as a rich text editor. */
     richTextEditor?: typeof ReactComponent;
+    /**
+     * Whether to hide the buttons in the form.
+     * @default false
+     * */
     hideButtons?: boolean;
-    formRef?: React.MutableRefObject<FormRef | undefined>;
+    /** An optional instance of an object associated with the form. */
+    instance?: ObjectInstance;
+    /**
+     * Whether the form is in read-only mode.
+     * @default false
+     * */
+    isReadOnly?: boolean;
+    /** An optional object associated with the form. */
+    object?: Obj;
+    /** Common properties for object input fields. */
+    objectInputCommonProps?: ObjectPropertyInputProps;
+    /** An optional user account associated with the form. */
+    user?: UserAccount;
+    /**
+     * The label for the submit button.
+     * @default Submit
+     * */
+    submitButtonLabel?: string;
+    /** A function to close a modal if the form is in one. */
+    closeModal?: () => void;
+    /** A function to navigate to a different path. */
+    navigateTo?: (path: string) => void;
+    /** A callback function to save draft the form data. */
+    onAutoSave?: (data: Record<string, unknown>) => Promise<{
+        isSuccessful: boolean;
+        error?: Record<string, unknown>;
+    }>;
+    /** A callback function to save the form data. It returns a promise with a response. */
+    onSave?: (data: Record<string, unknown>, setSubmitting?: (value: boolean) => void) => Promise<OnSaveResponse>;
+    /** A function to query addresses related to the form. */
+    queryAddresses?: (query: string) => Promise<Address[]>;
 };
 export type FormRef = {
     submit: (submission: Record<string, unknown>, type: 'submit' | 'draft', setError: (error?: Record<string, unknown>) => void, setSubmitting?: (value: boolean) => void) => void;

package/dist/published/components/custom/Form/Common/Form.js

@@ -231,23 +231,25 @@ export function Form(props) {
             // If form.io form is not configured and no inputProperties are
             // set, use object properties to build form.
             const propertiesInForm = object.properties.filter((prop) => prop.id !== associatedObject?.propertyId && (action?.type !== 'create' || prop.type !== 'document'));
-            setComponentProps([
-                ...buildComponentPropsFromObjectProperties(propertiesInForm, object.id, instance, {
-                    ...objectInputCommonProps,
-                    defaultPages: allDefaultPages,
-                    navigateTo,
-                    apiServices,
-                    user,
-                }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor),
-                !isReadOnly && !hideButtons && BottomButtons,
-            ]);
+            const components = buildComponentPropsFromObjectProperties(propertiesInForm, object.id, instance, {
+                ...objectInputCommonProps,
+                defaultPages: allDefaultPages,
+                navigateTo,
+                apiServices,
+                user,
+            }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor);
+            if (!isReadOnly && !hideButtons) {
+                components.push(BottomButtons);
+            }
+            setComponentProps(components);
         }
         else if (document) {
             const documentProperties = toPairs(flatten(document ?? {}));
-            setComponentProps([
-                ...buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight),
-                !isReadOnly && !hideButtons && BottomButtons,
-            ]);
+            const components = buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight);
+            if (!isReadOnly && !hideButtons) {
+                components.push(BottomButtons);
+            }
+            setComponentProps(components);
         }
     };
     const uploadDocuments = async (files, metadata) => {
@@ -443,7 +445,7 @@ export function Form(props) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         , { 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            onChange: (e) => setFormData(e.data), key: closeModal ? undefined : formKey, form: {
+            onChange: (e) => !isEqual(e.data, formData) && setFormData(e.data), key: closeModal ? undefined : formKey, form: {
                 display: 'form',
                 components: componentProps,
             }, formReady: handleFormReady })) : (React.createElement(Box, null,

package/dist/published/components/custom/Form/FormComponents/ButtonComponent.d.ts

@@ -21,11 +21,10 @@ type ButtonProps = {
 };
 export declare class ButtonComponent extends ReactComponent {
     [x: string]: any;
-    component: ButtonComponentProps;
     componentRoot?: Root;
     constructor(component: ButtonComponentProps, options: any, data: any);
     setError(error?: Record<string, unknown>): void;
-    getButton: (buttonAction: 'cancel' | 'submit' | 'save-draft') => Button | undefined;
+    getButton: (buttonAction: 'cancel' | 'submit' | 'save-draft') => any;
     handleCancel: (event: any) => void;
     handleSaveDraft: (setSubmitting: (value: boolean) => void) => void;
     handleSubmit: (setSubmitting: (value: boolean) => void) => void;

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.d.ts

@@ -1,10 +1,9 @@
 import { ReactComponent } from '@formio/react';
 import { Root } from 'react-dom/client';
-import { BaseFormComponentProps, SavedDocumentReference } from '../../types';
+import { SavedDocumentReference } from '../../types';
 export declare class DocumentComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
-    component: BaseFormComponentProps;
     errorDetails: any;
     componentRoot?: Root;
     constructor(component: any, options: any, data: any);

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -15,7 +15,6 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
-    component: FormFieldComponentProps;
     errorDetails: any;
     /**
      * Called when the component has been instantiated. This is useful to define

package/dist/published/components/custom/Form/FormComponents/ImageComponent/ImageComponent.d.ts

@@ -4,9 +4,6 @@ import { BaseFormComponentProps } from '../../types';
 export declare class ImageComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
-    component: BaseFormComponentProps & {
-        initialValue?: string;
-    };
     errorDetails: any;
     componentRoot?: Root;
     constructor(component: BaseFormComponentProps, options: any, data: any);

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectComponent.d.ts

@@ -12,7 +12,6 @@ export declare class ObjectComponent extends ReactComponent {
     relatedObject?: Obj;
     [x: string]: any;
     static schema: any;
-    component: ObjectComponentProps;
     errorDetails: any;
     componentRoot?: Root;
     criteria?: Record<string, unknown>;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -17,8 +17,10 @@ export const ObjectPropertyInput = (props) => {
     const [options, setOptions] = useState([]);
     const [openOptions, setOpenOptions] = useState(false);
     const [layout, setLayout] = useState();
+    const [layoutLoaded, setLayoutLoaded] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
     useEffect(() => {
+        setLayoutLoaded(false);
         if (relatedObject) {
             let defaultViewLayout;
             if (relatedObject?.viewLayout?.dropdown && displayOption === 'dropdown') {
@@ -41,10 +43,12 @@ export const ObjectPropertyInput = (props) => {
                 apiServices
                     .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
                     .then(setLayout)
-                    .catch((err) => setLayout(defaultViewLayout));
+                    .catch(() => setLayout(defaultViewLayout))
+                    .finally(() => setLayoutLoaded(true));
             }
             else {
                 setLayout(defaultViewLayout);
+                setLayoutLoaded(true);
             }
         }
     }, [displayOption, relatedObject, viewLayout]);
@@ -109,19 +113,21 @@ export const ObjectPropertyInput = (props) => {
         });
     }, [relatedObject, setLoadingOptions, setOptions, property, filter, layout]);
     useEffect(() => {
-        if (displayOption === 'dropdown') {
+        if (displayOption === 'dropdown' && layoutLoaded) {
             getDropdownOptions();
         }
-    }, [property, filter, displayOption, getDropdownOptions]);
+    }, [property, filter, displayOption, getDropdownOptions, layoutLoaded]);
     const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 500), [
         filter,
         property,
         getDropdownOptions,
     ]);
     useEffect(() => {
-        debouncedGetDropdownOptions(dropdownInput);
+        if (dropdownInput !== undefined && layoutLoaded) {
+            debouncedGetDropdownOptions(dropdownInput);
+        }
         return () => debouncedGetDropdownOptions.cancel();
-    }, [dropdownInput, debouncedGetDropdownOptions]);
+    }, [dropdownInput, debouncedGetDropdownOptions, layoutLoaded]);
     useEffect(() => {
         apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective?sanitizedVersion=true`), (error, object) => {
             if (error) {

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Action, ApiServices, Obj, Property, UserAccount } from '@evoke-platform/context';
-import { ObjectPropertyInputProps } from '../../types';
+import { Address, ObjectPropertyInputProps } from '../../types';
 export type ActionDialogProps = {
     open: boolean;
     onClose: () => void;
@@ -15,7 +15,7 @@ export type ActionDialogProps = {
     instanceId?: string;
     relatedProperty?: Property;
     apiServices: ApiServices;
-    queryAddresses?: unknown;
+    queryAddresses?: (query: string) => Promise<Address[]>;
     user?: UserAccount;
 };
 export declare const ActionDialog: (props: ActionDialogProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js

@@ -17,7 +17,8 @@ export const DropdownRepeatableField = (props) => {
         showAlert: false,
         isError: true,
     });
-    const [searchValue, setSearchValue] = useState('');
+    const [searchValue, setSearchValue] = useState();
+    const [layoutLoaded, setLayoutLoaded] = useState(false);
     const { instanceChanges } = useNotification();
     const fetchMiddleObjectInstances = async () => {
         const newInstances = await getMiddleObjectInstances();
@@ -36,6 +37,7 @@ export const DropdownRepeatableField = (props) => {
     useEffect(() => {
         const endObjectProperty = middleObject?.properties?.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
         if (endObjectProperty && endObjectProperty.objectId) {
+            setLayoutLoaded(false);
             apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/effective`), { params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } } }, (error, effectiveObject) => {
                 if (error) {
                     console.error(error);
@@ -58,10 +60,12 @@ export const DropdownRepeatableField = (props) => {
                         apiServices
                             .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
                             .then(setLayout)
-                            .catch((err) => setLayout(defaultLayout));
+                            .catch(() => setLayout(defaultLayout))
+                            .finally(() => setLayoutLoaded(true));
                     }
                     else {
                         setLayout(defaultLayout);
+                        setLayoutLoaded(true);
                     }
                 }
             });
@@ -110,15 +114,19 @@ export const DropdownRepeatableField = (props) => {
                 });
             }
         }
-    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout]);
+    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout, criteria]);
     const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
     useEffect(() => {
-        debouncedEndObjectSearch(searchValue);
+        if (searchValue !== undefined && layoutLoaded) {
+            debouncedEndObjectSearch(searchValue);
+        }
         return () => debouncedEndObjectSearch.cancel();
-    }, [searchValue, debouncedEndObjectSearch]);
+    }, [searchValue, debouncedEndObjectSearch, layoutLoaded]);
     useEffect(() => {
-        fetchEndObjectInstances();
-    }, [criteria, middleObject, property, fetchEndObjectInstances]);
+        if (layoutLoaded) {
+            fetchEndObjectInstances();
+        }
+    }, [fetchEndObjectInstances, layoutLoaded]);
     const saveMiddleInstance = (endObjectId, endObjectName) => {
         if (property.objectId) {
             const middleObject = getMiddleObject(instance, property, endObjectId, endObjectName);
@@ -157,5 +165,5 @@ export const DropdownRepeatableField = (props) => {
             }
         });
     };
-    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
+    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue ?? '', loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
 };

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { Address } from '../../types';
 export type ObjectPropertyInputProps = {
     property: Property;
     instance: ObjectInstance;
     canUpdateProperty: boolean;
     apiServices: ApiServices;
-    queryAddresses?: unknown;
+    queryAddresses?: (query: string) => Promise<Address[]>;
     user?: UserAccount;
     viewLayout?: ViewLayoutEntityReference;
 };

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.d.ts

@@ -10,7 +10,6 @@ type RepeatableFieldComponentProps = BaseFormComponentProps & {
 export declare class RepeatableFieldComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
-    component: RepeatableFieldComponentProps;
     criteria: Record<string, any> | undefined;
     updatedCriteria: Record<string, any>;
     constructor(component: RepeatableFieldComponentProps, options: any, data: any);

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserComponent.d.ts

@@ -6,9 +6,6 @@ export declare class UserComponent extends ReactComponent {
     [x: string]: any;
     static schema: any;
     errorDetails: any;
-    component: BaseFormComponentProps & {
-        initialValue?: string;
-    };
     componentRoot?: Root;
     criteria: Record<string, unknown> | undefined;
     updatedCriteria: Record<string, unknown>;

package/dist/published/components/custom/Form/utils.d.ts

@@ -2,7 +2,7 @@ import { ActionInput, ActionInputType, ApiServices, FormEntry, InputParameter, I
 import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
-import { ObjectPropertyInputProps } from './types';
+import { Address, ObjectPropertyInputProps } from './types';
 export declare function determineComponentType(properties: Property[], parameter?: InputParameter): ActionInputType | undefined;
 export declare function determineParameterType(componentType: string): PropertyType;
 export declare function getFlattenEntries(entries: FormEntry[]): InputParameterReference[];
@@ -21,9 +21,9 @@ export declare function getMiddleObject(instance: ObjectInstance, property: Prop
 } | undefined;
 export declare function getMiddleInstance(instanceId: string, property: Property, middleObjectInstances: ObjectInstance[]): ObjectInstance | undefined;
 export declare function getPrefixedUrl(url: string): string;
-export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: unknown, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
+export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: (query: string) => Promise<Address[]>, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
 export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
-export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: unknown, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];
+export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: ((query: string) => Promise<Address[]>) | undefined, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];
 export declare const buildComponentPropsFromDocumentProperties: (documentProperties: [string, unknown][], readOnly?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, fieldHeight?: 'small' | 'medium') => {
     type: string;
     key: string;

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CriteriaBuilder as BuildCriteria } from '../index';
 export default {
-    title: 'Input/CriteriaBuilder',
+    title: 'Custom/CriteriaBuilder',
     component: BuildCriteria,
 };
 const defaultProperties = [

package/dist/published/stories/Form.stories.d.ts

@@ -0,0 +1,6 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Form } from '../index';
+declare const _default: ComponentMeta<typeof Form>;
+export default _default;
+export declare const FormWithButtons: ComponentStory<typeof Form>;
+export declare const FormWithNoButtons: ComponentStory<typeof Form>;

package/dist/published/stories/Form.stories.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Button, Form } from '../index';
+export default {
+    title: 'Custom/Form',
+    component: Form,
+};
+const object = {
+    id: 'test',
+    name: 'Test',
+    properties: [
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+            required: true,
+        },
+        {
+            id: 'decimal',
+            name: 'Decimal',
+            type: 'number',
+        },
+        {
+            id: 'integer',
+            name: 'Integer',
+            type: 'integer',
+        },
+    ],
+    actions: [
+        {
+            id: '_create',
+            name: 'Create Test',
+            type: 'create',
+            outputEvent: 'Test Created',
+        },
+        {
+            id: '_update',
+            name: 'Update Test',
+            type: 'update',
+            outputEvent: 'Test Updated',
+        },
+        {
+            id: '_delete',
+            name: 'Delete Test',
+            type: 'delete',
+            inputProperties: [],
+            outputEvent: 'Test Deleted',
+        },
+    ],
+};
+const FormWithButtonsTemplate = (args) => {
+    return React.createElement(Form, { ...args });
+};
+export const FormWithButtons = FormWithButtonsTemplate.bind({});
+FormWithButtons.args = {
+    actionId: '_update',
+    actionType: 'update',
+    object: object,
+    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5 },
+};
+const FormWithNoButtonsTemplate = (args) => {
+    return (React.createElement("div", null,
+        React.createElement(Form, { ...args }),
+        React.createElement(Button, { onClick: () => {
+                console.log(args.formRef?.current?.data);
+                args.formRef?.current?.data &&
+                    args.formRef.current.submit({ data: args.formRef.current.data }, 'submit', (error) => {
+                        console.log(error);
+                    });
+            } },
+            ' ',
+            "Submit",
+            ' ')));
+};
+export const FormWithNoButtons = FormWithNoButtonsTemplate.bind({});
+FormWithNoButtons.args = {
+    actionId: '_update',
+    actionType: 'update',
+    object: object,
+    instance: { id: 'id', objectId: 'test', name: 'test', integer: 12, decimal: 12.5 },
+    hideButtons: true,
+    formRef: { current: {} },
+};

package/dist/published/stories/Introduction.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const Introduction: React.VFC<Record<string, never>>;
+declare const _default: {
+    title: string;
+    component: React.VFC<Record<string, never>>;
+};
+export default _default;

package/dist/published/stories/Introduction.stories.js

@@ -0,0 +1,50 @@
+import { Box, Container, Link, Typography } from '@mui/material';
+import React from 'react';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const logo = require('../assets/evoke-logo.png');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const packageJson = require('../../package.json');
+const styles = {
+    header: { fontSize: '24px', fontWeight: 600 },
+    subheader: { paddingTop: '23px', fontSize: '16px', fontWeight: 600 },
+    code: { backgroundColor: '#f5f5f5', fontFamily: 'monospace' },
+};
+export const Introduction = () => (React.createElement(Container, null,
+    React.createElement(Box, { textAlign: "center", my: 4 },
+        React.createElement(Box, { sx: { padding: '20px' } },
+            React.createElement("img", { alt: "evoke-logo", height: "70", src: logo })),
+        React.createElement(Typography, { sx: styles.header }, "@evoke-platform/ui-components"),
+        React.createElement(Typography, { variant: "body1", mt: 2 }, "A collection of React components to use within custom widgets for the Evoke Platform."),
+        React.createElement(Typography, null,
+            "It is built on top of the",
+            ' ',
+            React.createElement(Link, { href: "https://mui.com/", rel: "noopener noreferrer", target: "_blank" }, "@mui/material"),
+            ' ',
+            "components."),
+        React.createElement(Box, { display: "flex", justifyContent: "center", gap: 2, my: 4 },
+            React.createElement(Typography, null,
+                "Version: ",
+                packageJson.version))),
+    React.createElement(Typography, { sx: styles.subheader }, "Installation"),
+    React.createElement(Typography, null,
+        "If your project was scaffolded using the plugin generator, then",
+        ' ',
+        React.createElement("strong", null, "@evoke-platform/ui-components"),
+        " is already available and no further installation is necessary."),
+    React.createElement(Box, { component: "pre", sx: { backgroundColor: '#f5f5f5', padding: 2, borderRadius: 1 } },
+        React.createElement(Typography, { sx: styles.code, component: "code" }, "npm i @evoke-platform/ui-components")),
+    React.createElement(Typography, { sx: styles.subheader }, "Usage"),
+    React.createElement(Typography, null, "Import the components you need from the package and use them in your application."),
+    React.createElement(Box, { component: "pre", sx: { backgroundColor: '#f5f5f5', padding: 2, borderRadius: 1 } },
+        React.createElement(Typography, { sx: styles.code, component: "code" },
+            `import { Button } from '@evoke-platform/ui-components';`,
+            `\n`,
+            `\nconst MyComponent = () => (`,
+            `\n    <Button variant="contained" color="primary">`,
+            `\n        Click Me`,
+            `\n    </Button>`,
+            `\n);`))));
+export default {
+    title: 'Introduction',
+    component: Introduction,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.9",
+    "version": "1.2.0-testing.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",