@evoke-platform/ui-components 1.8.0-dev.0 → 1.8.0-dev.10

package/dist/published/components/core/TextField/TextField.js

@@ -4,7 +4,8 @@ import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
 const TextField = (props) => {
-    const { id, variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
+    const { labelPlacement, readOnly, instructionText, errorMessage, ...muiProps } = props;
+    const { id, variant, label, required, error } = muiProps;
     const readOnlyStyles = {
         '.MuiOutlinedInput-root': {
             paddingRight: '5px',
@@ -28,7 +29,7 @@ const TextField = (props) => {
                 readOnly: readOnly,
                 'aria-readonly': !!readOnly,
                 'data-testid': 'label-outside',
-            }, ...props, label: null, sx: readOnly
+            }, ...muiProps, label: null, sx: readOnly
                 ? { ...readOnlyStyles, ...props.sx }
                 : {
                     '& fieldset': { borderRadius: '8px' },

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

@@ -22,6 +22,8 @@ export type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     };
     hideSearchbar?: boolean;
     loadingOptions?: LoadingOptions;
+    hideDownload?: boolean;
+    exportFileName?: string;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): React.JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import LinearProgress from '../../core/LinearProgress';
 import { dateTimeBetweenOperator } from './DateTimeCustomOperator';
 import Toolbar from './Toolbar';
 export default function (props) {
-    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, ...rest } = props;
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, hideDownload, exportFileName, ...rest } = props;
     const [anchorEl, setAnchorEl] = useState();
     const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
     const addColumnFilterOperators = (columns) => {
@@ -92,6 +92,8 @@ export default function (props) {
                     title,
                     bulkAction,
                     hideSearchbar,
+                    hideDownload,
+                    exportFileName,
                 },
                 panel: {
                     anchorEl: anchorEl,

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -10,6 +10,8 @@ export type GridToolbarProps = MuiGridToolbarProps & {
     title?: string;
     bulkAction?: BulkAction;
     hideSearchbar?: boolean;
+    hideDownload?: boolean;
+    exportFileName?: string;
 };
 declare function Toolbar(props: GridToolbarProps): React.JSX.Element;
 export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -6,7 +6,8 @@ import UIThemeProvider from '../../../theme';
 import { Button, IconButton } from '../../core';
 import { Grid } from '../../layout';
 function Toolbar(props) {
-    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar } = props;
+    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar, hideDownload, exportFileName } = props;
+    const resolvedFileName = exportFileName ?? 'data';
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
         iconButton: {
@@ -50,14 +51,14 @@ function Toolbar(props) {
                 React.createElement(Grid, { item: true, xs: 6 }, !hideSearchbar && (React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: styles.quickFilter }))),
                 !bulkAction ? (React.createElement(Grid, { item: true },
                     React.createElement(Grid, { container: true, spacing: 1, sx: styles.icon },
-                        React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },
+                        !hideDownload && (React.createElement(Grid, { item: true, sx: { paddingRight: '15px' } },
                             React.createElement(GridToolbarExport, { sx: {
                                     color: '#212B36',
                                     height: '95%',
                                     '&:hover': { backgroundColor: '#f2f3f5' },
                                     paddingLeft: '10px',
                                     paddingRight: '10px',
-                                }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) })),
+                                }, printOptions: { disableToolbarButton: true }, csvOptions: { fileName: resolvedFileName }, startIcon: React.createElement(FileDownloadRounded, null) }))),
                         React.createElement(Grid, { item: true },
                             React.createElement(GridToolbarFilterButton, { componentsProps: {
                                     button: {

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

@@ -1,3 +1,4 @@
 import DataGrid from './DataGrid';
+export type { GridSortModel } from '@mui/x-data-grid';
 export { DataGrid };
 export default DataGrid;

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

@@ -230,6 +230,10 @@ export const ObjectPropertyInput = (props) => {
                         ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
                 }, onKeyDownCapture: (e) => {
+                    // prevents keyboard trap
+                    if (e.key === 'Tab') {
+                        return;
+                    }
                     if (instance?.[property.id]?.id || selectedInstance?.id) {
                         e.preventDefault();
                     }

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.js

@@ -89,6 +89,10 @@ export const UserProperty = (props) => {
                     }
                 }
             }, onKeyDownCapture: (e) => {
+                // prevents keyboard trap
+                if (e.key === 'Tab') {
+                    return;
+                }
                 if (value) {
                     e.preventDefault();
                 }

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

@@ -254,6 +254,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 conditional: convertVisibilityToConditional(displayOptions?.visibility),
                 viewLayout: displayOptions?.viewLayout,
                 strictlyTrue: parameter.type === 'boolean' && parameter.strictlyTrue,
+                documentMetadata: parameter.type === 'document' ? entry.documentMetadata : undefined,
             };
         }
     })
@@ -420,6 +421,7 @@ export function convertComponentsToForm(components) {
                         }
                         : {}),
                 },
+                ...(component.documentMetadata ? { documentMetadata: component.documentMetadata } : {}),
                 enumWithLabels: component.data?.values,
             };
         }
@@ -489,49 +491,76 @@ export function flattenFormComponents(components) {
 export async function addObjectPropertiesToComponentProps(properties, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, defaultPages, navigateTo, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor) {
+    function removeEmptySections(component) {
+        // if a component is an entry to a property that the user doesn't have permission to view, remove it
+        if (component?.property?.id) {
+            const hasPermission = allProperties.some((p) => p.id === component.property.id);
+            if (!hasPermission)
+                return undefined;
+        }
+        // remove sections or tabs with no components
+        if (component.components) {
+            component.components = component.components
+                .map(removeEmptySections)
+                .filter((c) => c !== undefined);
+            if (component.components.length === 0)
+                return undefined;
+        }
+        // check columns for empty components or sections with no components
+        const actionInput = component;
+        if (actionInput.columns) {
+            const processedColumns = actionInput.columns.map((col) => ({
+                ...col,
+                components: (col.components || [])
+                    .map(removeEmptySections)
+                    .filter((c) => c !== undefined),
+            }));
+            actionInput.columns = processedColumns;
+            if (processedColumns.every((col) => col.components.length === 0)) {
+                return undefined;
+            }
+        }
+        return component;
+    }
+    const allProperties = properties.flatMap((property) => property.type === 'address'
+        ? [
+            {
+                id: `${property.id}.line1`,
+                name: `${property.name} Line 1`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.line2`,
+                name: `${property.name} Line 2`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.city`,
+                name: `${property.name} City`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.county`,
+                name: `${property.name} County`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.state`,
+                name: `${property.name} State`,
+                type: 'string',
+            },
+            {
+                id: `${property.id}.zipCode`,
+                name: `${property.name} Zip Code`,
+                type: 'string',
+            },
+        ]
+        : [property]);
     return [
         ...(await Promise.all(formComponents
             ?.filter((component) => !isUndefined(component) && !isNil(component))
             ?.map(async (component) => {
-            const property = properties
-                .flatMap((property) => {
-                if (property.type === 'address') {
-                    return [
-                        {
-                            id: `${property.id}.line1`,
-                            name: `${property.name} Line 1`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.line2`,
-                            name: `${property.name} Line 2`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.city`,
-                            name: `${property.name} City`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.county`,
-                            name: `${property.name} County`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.state`,
-                            name: `${property.name} State`,
-                            type: 'string',
-                        },
-                        {
-                            id: `${property.id}.zipCode`,
-                            name: `${property.name} Zip Code`,
-                            type: 'string',
-                        },
-                    ];
-                }
-                return property;
-            })
-                .find((property) => property.id === component.key);
+            const property = allProperties.find((prop) => prop.id === component.key);
             const id = property?.id ?? component.key;
             if (component.type === 'Content') {
                 return component;
@@ -543,7 +572,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                             ? DateTime.now().toISODate()
                             : DateTime.fromISO(component.initialValue).toISODate();
                 }
-                // @Deprecrated
+                // @Deprecated
                 // This will overwrite the default value
                 if (component.defaultToCurrentDate) {
                     component.initialValue = DateTime.now().toISODate();
@@ -556,7 +585,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                             ? DateTime.now().toISO()
                             : DateTime.fromISO(component.initialValue).toISO();
                 }
-                // @Deprecrated
+                // @Deprecated
                 // This will overwrite the default value
                 if (component.defaultToCurrentDate) {
                     component.initialValue = DateTime.now().toISO();
@@ -575,7 +604,7 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                                 suppressMilliseconds: true,
                             });
                 }
-                // @Deprecrated
+                // @Deprecated
                 // This will overwrite the default value
                 if (component.defaultToCurrentTime) {
                     component.initialValue = DateTime.now().toISOTime({
@@ -709,13 +738,16 @@ formComponents, allCriteriaInputs, instance, objectPropertyInputProps, associate
                         : undefined,
                 };
             }
-            if (component.columns) {
+            else {
+                component = removeEmptySections(component);
+            }
+            if (component?.columns) {
                 for (const column of component.columns) {
                     column.components = await addObjectPropertiesToComponentProps(properties, column.components, allCriteriaInputs, instance, objectPropertyInputProps, associatedObject, autoSave, readOnly, undefined, undefined, queryAddresses, apiServices, isModal, fieldHeight, richTextEditor);
                 }
                 return component;
             }
-            if (component.components) {
+            if (component?.components) {
                 for (const item of component.components) {
                     const nestedFieldProperty = properties.find((property) => property.id === item.key);
                     if (item.type) {

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

@@ -2,7 +2,7 @@ import { EvokeForm, ObjectInstance } from '@evoke-platform/context';
 import React, { ComponentType } from 'react';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { BaseProps, Document, SimpleEditorProps } from './components/types';
-export type FormProps = BaseProps & {
+export type FormRendererProps = BaseProps & {
     richTextEditor?: ComponentType<SimpleEditorProps>;
     hideButtons?: boolean;
     value?: FieldValues;
@@ -14,6 +14,10 @@ export type FormProps = BaseProps & {
     instance?: ObjectInstance | Document;
     onChange: (id: string, value: unknown) => void;
     onValidationChange?: (errors: FieldErrors) => void;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
-declare function FormRenderer(props: FormProps): React.JSX.Element;
+declare function FormRenderer(props: FormRendererProps): React.JSX.Element;
 export default FormRenderer;

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

@@ -1,5 +1,5 @@
 import { useObject } from '@evoke-platform/context';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useResponsive } from '../../../theme';
@@ -12,7 +12,7 @@ import { convertDocToParameters, convertPropertiesToParams } from './components/
 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 { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, associatedObject, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -99,10 +99,9 @@ function FormRenderer(props) {
     }, []);
     if (entries && parameters && (!actionId || action)) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Box, { sx: {
+            ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
                     paddingX: isSmallerThanMd ? 2 : 3,
                     paddingTop: '0px',
-                    borderBottom: '2px solid #F4F6F8',
                 } },
                 React.createElement(Box, { sx: {
                         display: 'flex',
@@ -111,13 +110,14 @@ function FormRenderer(props) {
                         flexWrap: 'wrap',
                         paddingY: isSm || isXs ? 2 : 3,
                     } },
-                    React.createElement(Typography, { sx: {
+                    title && (React.createElement(Typography, { sx: {
                             fontSize: '20px',
                             lineHeight: '30px',
                             fontWeight: 700,
                             flexGrow: '1',
-                        } }, title),
+                        } }, title)),
                     isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            color: '#212B36',
                             display: 'flex',
                             alignItems: 'center',
                             maxHeight: '22px',
@@ -140,7 +140,7 @@ function FormRenderer(props) {
                                 fontWeight: 400,
                                 fontSize: '14px',
                             }, onClick: handleCollapseAll }, "Collapse all")))),
-                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title })),
+                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted }))),
             React.createElement(FormContext.Provider, { value: {
                     fetchedOptions,
                     setFetchedOptions: updateFetchedOptions,
@@ -159,26 +159,25 @@ function FormRenderer(props) {
                     handleChange: onChange,
                     triggerFieldReset,
                     showSubmitError: isSubmitted,
+                    associatedObject,
                 } },
                 React.createElement(Box, { sx: {
-                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
-                        paddingBottom: '0px',
-                        paddingTop: !hasSections ? undefined : '0px',
+                        paddingX: isSm || isXs ? 2 : 3,
+                        // when rendering the default delete action, we don't want a border
+                        borderTop: !form.id || isModal ? undefined : '1px solid #e9ecef',
                     } },
                     entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
                     !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
                             ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
-                            bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
+                            bottom: isModal || isSmallerThanMd ? 0 : 24,
                             zIndex: 1000,
                             borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
                             backgroundColor: '#fff',
-                            paddingY: isSmallerThanMd ? '16px' : '20px',
-                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            padding: 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, unregister: unregister, entries: entries, setValue: setValue, formId: form.id })))))));

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

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import { BaseProps, SimpleEditorProps } from './components/types';
-export type FormProps = BaseProps & {
+export type FormRendererContainerProps = BaseProps & {
     formId?: string;
     instanceId?: string;
     defaultPages?: Record<string, string>;
@@ -12,10 +12,15 @@ export type FormProps = BaseProps & {
     };
     actionId?: string;
     stickyFooter?: boolean;
+    hideButtons?: boolean;
     objectId: string;
     richTextEditor?: ComponentType<SimpleEditorProps>;
     onClose?: () => void;
     onSubmit?: (submission: Record<string, unknown>) => Promise<void>;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
-declare function FormRendererContainer(props: FormProps): React.JSX.Element;
+declare function FormRendererContainer(props: FormRendererContainerProps): React.JSX.Element;
 export default FormRendererContainer;