@evoke-platform/ui-components 1.1.0-testing.3 → 1.1.0-testing.5

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { ApiServices, Obj, ObjectInstance, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
+import React from 'react';
 import '../../../../styles/form-component.css';
 import { Document, ObjectPropertyInputProps } from '../types';
 type OnSaveResponse = {
@@ -34,6 +34,12 @@ export type FormProps = {
     queryAddresses?: unknown;
     fieldHeight?: 'small' | 'medium';
     richTextEditor?: typeof ReactComponent;
+    hideButtons?: boolean;
+    formRef?: React.MutableRefObject<FormRef | undefined>;
+};
+export type FormRef = {
+    submit: (submission: Record<string, unknown>, type: 'submit' | 'draft', setError: (error?: Record<string, unknown>) => void, setSubmitting?: (value: boolean) => void) => void;
+    data?: Record<string, unknown>;
 };
 export declare function Form(props: FormProps): JSX.Element;
 export default Form;

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

@@ -17,8 +17,9 @@ const usePrevious = (value) => {
 };
 Utils.Evaluator.noeval = true;
 export function Form(props) {
-    const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, } = props;
+    const { clearable, closeModal, onSave, submitButtonLabel, instance, object, objectInputCommonProps, actionId, actionType, associatedObject, onAutoSave, apiServices, navigateTo, document, queryAddresses, user, isReadOnly, fieldHeight, richTextEditor, hideButtons, formRef, } = props;
     const [formKey, setFormKey] = useState();
+    const [formData, setFormData] = useState();
     const [componentProps, setComponentProps] = useState([]);
     const [snackbarError, setSnackbarError] = useState();
     const prevFormKey = usePrevious(formKey);
@@ -70,6 +71,14 @@ export function Form(props) {
         });
         buildComponents();
     };
+    useEffect(() => {
+        if (formRef) {
+            formRef.current = {
+                submit: saveHandler,
+                data: formData,
+            };
+        }
+    }, [formRef, formData]);
     useEffect(() => {
         // TODO: Check why formKey is not being set for create actions
         if (((actionType === 'update' || actionType === 'delete') && !!instance) || !!document) {
@@ -130,89 +139,92 @@ export function Form(props) {
                     apiServices,
                     user: userAccount,
                 }, undefined, isReadOnly, allDefaultPages, navigateTo, queryAddresses, apiServices, !!closeModal, fieldHeight, richTextEditor);
-                const components = isReadOnly ? newComponentProps : [...newComponentProps, BottomButtons];
-                setComponentProps(components);
+                if (!hideButtons && !isReadOnly) {
+                    newComponentProps.push(BottomButtons);
+                }
+                setComponentProps(newComponentProps);
             }
             else {
-                // this condition is used for the delete action's modal form
-                setComponentProps([
-                    ...(await addObjectPropertiesToComponentProps(visibleObjectProperties, [
-                        {
-                            html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
-                            label: 'Content',
-                            customClass: '',
-                            refreshOnChange: false,
-                            hidden: false,
-                            modalEdit: false,
-                            conditional: {
-                                show: null,
-                                when: null,
-                                eq: '',
-                            },
-                            type: 'Content',
-                            key: 'content',
-                            input: false,
-                            placeholder: '',
-                            prefix: '',
-                            suffix: '',
+                const components = await addObjectPropertiesToComponentProps(visibleObjectProperties, [
+                    {
+                        html: `<p>${action?.type === 'delete' ? 'This action cannot be undone.' : 'Are you sure?'}</p>`,
+                        label: 'Content',
+                        customClass: '',
+                        refreshOnChange: false,
+                        hidden: false,
+                        modalEdit: false,
+                        conditional: {
+                            show: null,
+                            when: null,
+                            eq: '',
+                        },
+                        type: 'Content',
+                        key: 'content',
+                        input: false,
+                        placeholder: '',
+                        prefix: '',
+                        suffix: '',
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        clearOnHide: true,
+                        refreshOn: '',
+                        redrawOn: '',
+                        tableView: false,
+                        dataGridLabel: false,
+                        labelPosition: 'top',
+                        description: '',
+                        errorLabel: '',
+                        tooltip: '',
+                        hideLabel: false,
+                        tabindex: '',
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: '',
+                        calculateValue: '',
+                        calculateServer: false,
+                        widget: null,
+                        attributes: {},
+                        validateOn: 'change',
+                        validate: {
+                            required: false,
+                            custom: '',
+                            customPrivate: false,
+                            strictDateValidation: false,
                             multiple: false,
-                            defaultValue: null,
-                            protected: false,
                             unique: false,
-                            persistent: true,
-                            clearOnHide: true,
-                            refreshOn: '',
-                            redrawOn: '',
-                            tableView: false,
-                            dataGridLabel: false,
-                            labelPosition: 'top',
-                            description: '',
-                            errorLabel: '',
-                            tooltip: '',
-                            hideLabel: false,
-                            tabindex: '',
-                            disabled: false,
-                            autofocus: false,
-                            dbIndex: false,
-                            customDefaultValue: '',
-                            calculateValue: '',
-                            calculateServer: false,
-                            widget: null,
-                            attributes: {},
-                            validateOn: 'change',
-                            validate: {
-                                required: false,
-                                custom: '',
-                                customPrivate: false,
-                                strictDateValidation: false,
-                                multiple: false,
-                                unique: false,
-                            },
-                            overlay: {
-                                style: '',
-                                left: '',
-                                top: '',
-                                width: '',
-                                height: '',
-                            },
-                            allowCalculateOverride: false,
-                            encrypted: false,
-                            showCharCount: false,
-                            showWordCount: false,
-                            properties: {},
-                            allowMultipleMasks: false,
-                            addons: [],
-                            id: 'eahbwo',
                         },
-                    ], instance, {
-                        ...objectInputCommonProps,
-                        defaultPages: allDefaultPages,
-                        navigateTo,
-                        apiServices,
-                        user: userAccount,
-                    }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor)),
-                    BottomButtons,
-                ]);
+                        overlay: {
+                            style: '',
+                            left: '',
+                            top: '',
+                            width: '',
+                            height: '',
+                        },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        addons: [],
+                        id: 'eahbwo',
+                    },
+                ], instance, {
+                    ...objectInputCommonProps,
+                    defaultPages: allDefaultPages,
+                    navigateTo,
+                    apiServices,
+                    user: userAccount,
+                }, undefined, undefined, undefined, undefined, undefined, undefined, !!closeModal, fieldHeight, richTextEditor);
+                if (!hideButtons) {
+                    components.push(BottomButtons);
+                }
+                // this condition is used for the delete action's modal form
+                setComponentProps(components);
             }
         }
         else if (object?.properties) {
@@ -227,14 +239,14 @@ export function Form(props) {
                     apiServices,
                     user,
                 }, !!action, undefined, isReadOnly, queryAddresses, !!closeModal, fieldHeight, richTextEditor),
-                !isReadOnly && BottomButtons,
+                !isReadOnly && !hideButtons && BottomButtons,
             ]);
         }
         else if (document) {
             const documentProperties = toPairs(flatten(document ?? {}));
             setComponentProps([
                 ...buildComponentPropsFromDocumentProperties(documentProperties, isReadOnly, undefined, fieldHeight),
-                !isReadOnly && BottomButtons,
+                !isReadOnly && !hideButtons && BottomButtons,
             ]);
         }
     };
@@ -427,7 +439,11 @@ export function Form(props) {
         ],
     };
     return (React.createElement(Box, null,
-        componentProps.length ? (React.createElement(FormIO, { key: closeModal ? undefined : formKey, form: {
+        componentProps.length ? (React.createElement(FormIO
+        // 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: {
                 display: 'form',
                 components: componentProps,
             }, formReady: handleFormReady })) : (React.createElement(Box, null,

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

@@ -78,7 +78,11 @@ export const ObjectPropertyInput = (props) => {
             updatedFilter = {};
         }
         updatedFilter.limit = 100;
-        updatedFilter.order = 'name ASC';
+        const { propertyId, direction } = layout?.sort ?? {
+            propertyId: 'name',
+            direction: 'asc',
+        };
+        updatedFilter.order = `${propertyId} ${direction}`;
         const where = name
             ? transformToWhere({
                 name: {
@@ -103,7 +107,7 @@ export const ObjectPropertyInput = (props) => {
                 setLoadingOptions(false);
             }
         });
-    }, [relatedObject, setLoadingOptions, setOptions, property, filter]);
+    }, [relatedObject, setLoadingOptions, setOptions, property, filter, layout]);
     useEffect(() => {
         if (displayOption === 'dropdown') {
             getDropdownOptions();
@@ -281,7 +285,7 @@ export const ObjectPropertyInput = (props) => {
                                 caretColor: 'white',
                             }
                             : {}),
-                    } })), readOnly: !loadingOptions && !canUpdateProperty, error: error }))) : (React.createElement(Box, { sx: {
+                    } })), readOnly: !loadingOptions && !canUpdateProperty, error: error, sortBy: "NONE" }))) : (React.createElement(Box, { sx: {
                 padding: (instance?.[property.id]?.name ?? selectedInstance?.name)
                     ? '16.5px 14px'
                     : '10.5px 0',

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

@@ -78,9 +78,13 @@ export const DropdownRepeatableField = (props) => {
             setLoading(true);
             const endObjectProperty = middleObject.properties?.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
             if (endObjectProperty?.objectId) {
+                const { propertyId, direction } = layout?.sort ?? {
+                    propertyId: 'name',
+                    direction: 'asc',
+                };
                 const filter = {
                     limit: 100,
-                    order: 'name ASC',
+                    order: `${propertyId} ${direction}`,
                 };
                 let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
                 if (searchedName?.length) {
@@ -106,7 +110,7 @@ export const DropdownRepeatableField = (props) => {
                 });
             }
         }
-    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject]);
+    }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout]);
     const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
     useEffect(() => {
         debouncedEndObjectSearch(searchValue);

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

@@ -86,6 +86,7 @@ export const DropdownRepeatableFieldInput = (props) => {
                         setSearchValue(event.target.value);
                     } })),
                 loading: loading,
+                sortBy: 'NONE',
             } }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })))) : (React.createElement(Typography, null, selectedOptions && selectedOptions.map((option) => option.label).join(', ')))));
 };

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

@@ -1,3 +1,4 @@
-import { Form } from './Common';
+import { Form, FormRef } from './Common';
 export { Form };
+export type { FormRef };
 export default Form;

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

@@ -384,7 +384,7 @@ export function convertComponentsToForm(components) {
                                             ...(component.orderBy ? { sortBy: component.orderBy } : {}),
                                         }
                                         : isArray(component.initialValue)
-                                            ? component.initialValue.map((c) => c.value)
+                                            ? component.initialValue.map((c) => typeof c === 'string' ? c : c.value)
                                             : component.initialValue?.value
                                                 ? component.initialValue?.value
                                                 : component.initialValue,

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

@@ -3,10 +3,11 @@ export { CriteriaBuilder } from './CriteriaBuilder';
 export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
+export type { FormRef } from './Form';
 export { FormField } from './FormField';
+export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
-export { UserAvatar } from './UserAvatar';
-export { HistoryLog } from './HistoryLog';
 export { RichTextViewer } from './RichTextViewer';
+export { UserAvatar } from './UserAvatar';

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

@@ -4,9 +4,9 @@ export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export { FormField } from './FormField';
+export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
-export { UserAvatar } from './UserAvatar';
-export { HistoryLog } from './HistoryLog';
 export { RichTextViewer } from './RichTextViewer';
+export { UserAvatar } from './UserAvatar';

package/dist/published/index.d.ts

@@ -3,6 +3,7 @@ export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTime
 export * from './colors';
 export * from './components/core';
 export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * as EVOKE_TYPES from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.1.0-testing.3",
+    "version": "1.1.0-testing.5",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -94,7 +94,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.0.0-dev.118",
+        "@evoke-platform/context": "^1.0.0-dev.126",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",