@evoke-platform/ui-components 1.8.0-testing.5 → 1.8.0-testing.7

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

@@ -489,49 +489,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 +570,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 +583,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 +602,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 +736,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.8.0-testing.5",
+    "version": "1.8.0-testing.7",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",