@abgov/jsonforms-components 2.42.1 → 2.42.3

package/index.esm.js

@@ -7160,7 +7160,6 @@ const CompletionStatus = styled.div(_t2$4 || (_t2$4 = _$6`
 const BarTop = styled.div(_t3$3 || (_t3$3 = _$6`
   display: flex;
 
-
   .progress-text {
     margin-left: auto;
   }
@@ -7194,8 +7193,6 @@ const Bar = styled.div(_t4$3 || (_t4$3 = _$6`
 
     box-sizing: border-box;
   }
-
-
 `));
 styled.div(_t5$3 || (_t5$3 = _$6``));
 const BadgeWrapper = styled.div(_t6$2 || (_t6$2 = _$6`
@@ -7321,6 +7318,12 @@ const PageStepperRow = styled.tr(_t25$1 || (_t25$1 = _$6`
           td {
             transition: background-color 0.2s ease-in-out;
           }
+
+
+          &:focus-visible {
+            border-radius: 0.25rem;
+            outline: 3px solid var(--goa-color-interactive-focus);
+          }
         `);
 const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$6`
   & > td {
@@ -10154,7 +10157,7 @@ const Trash = styled.div(_t12 || (_t12 = _$3`
 const ListContainer = styled.div(_t13 || (_t13 = _$3`
   padding: 0 0 0 0;
 `));
-const DetailMargin = styled.div(_t14 || (_t14 = _$3`
+styled.div(_t14 || (_t14 = _$3`
   padding: 0 0 var(--goa-space-l) 0;
 `));
 const IconPadding = styled.div(_t15 || (_t15 = _$3`
@@ -11526,17 +11529,24 @@ const MainTab = ({
   } = useJsonForms();
   const rowData = getDataAtPath(core === null || core === void 0 ? void 0 : core.data, childPath);
   const orderedRowData = orderRowData(rowData, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.detail);
-  const rowErrors = (_b = core === null || core === void 0 ? void 0 : core.errors) === null || _b === void 0 ? void 0 : _b.filter(e => {
-    const base = `/${childPath.replace(/\./g, '/')}`;
-    return e.instancePath === base || e.instancePath.startsWith(base + '/');
-  }).filter(e => {
-    var _a;
-    return (((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
-  }).map(e => humanizeAjvError(e, core.schema, core.uischema)).map((msg, index, arr) => `${msg}${index < arr.length - 1 ? ', ' : ''}`);
+  function resolveField(e) {
+    if (e.keyword === 'required') {
+      return e.params.missingProperty;
+    }
+    const path = e.instancePath.split('/');
+    return path[path.length - 1];
+  }
+  const rowBase = `/${childPath.replace(/\./g, '/')}`;
+  const fieldErrors = (_b = core === null || core === void 0 ? void 0 : core.errors) === null || _b === void 0 ? void 0 : _b.filter(e => e.instancePath === rowBase || e.instancePath.startsWith(rowBase + '/')).reduce((acc, e) => {
+    const field = resolveField(e);
+    acc[field] = humanizeAjvError(e, core.schema, core.uischema); //e.message;
+    return acc;
+  }, {});
+  const errorText = fieldErrors && Object.values(fieldErrors).length > 0 ? Object.values(fieldErrors).join(', ') : undefined;
   return jsx("div", {
     "data-testid": `object-array-main-item-${rowIndex}`,
-    children: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? jsx(GoabFormItem, {
-      error: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? rowErrors : null,
+    children: errorText ? jsx(GoabFormItem, {
+      error: errorText,
       children: jsx(MainItemComponent, {
         rowData: orderedRowData,
         childPath: childPath,
@@ -11579,7 +11589,7 @@ const ObjectArrayList = ({
   listTitle,
   errors
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const isEmptyList = data === 0;
   const rightRef = useRef(null);
   const current = rightRef.current;
@@ -11611,6 +11621,7 @@ const ObjectArrayList = ({
   const selectCurrentTab = index => {
     setCurrentIndex(index);
   };
+  const continueButtonTitle = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.listWithDetailsContinueButtonTitle;
   return jsx(ListContainer, {
     children: jsxs(RowFlex, {
       children: [currentListPage === 0 && jsx(FlexTabs, {
@@ -11628,7 +11639,8 @@ const ObjectArrayList = ({
             enabled: enabled,
             current: current,
             setCurrentListPage: index => setCurrentListPage(index),
-            uischema: uischema
+            uischema: uischema,
+            schema: schema
           }, childPath);
         })
       }), currentListPage > 0 && jsxs(UpdateListContainer, {
@@ -11655,7 +11667,7 @@ const ObjectArrayList = ({
             setCurrentListPage(0);
           },
           testId: "next-list-button",
-          children: "Continue"
+          children: continueButtonTitle ? continueButtonTitle : 'Continue'
         })]
       })]
     })
@@ -11721,67 +11733,23 @@ class ListWithDetailControl extends React.Component {
     const controlElement = uischema;
     // eslint-disable-next-line
     const listTitle = (_e = (_d = (_c = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.label) !== null && _a !== void 0 ? _a : (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : getItemsTitle(schema)) !== null && _d !== void 0 ? _d : schema === null || schema === void 0 ? void 0 : schema.title) !== null && _e !== void 0 ? _e : label;
-    return jsx(Visible, {
+    return jsxs(Visible, {
       visible: visible,
       "data-testid": "jsonforms-object-list-wrapper",
-      children: jsxs(DetailMargin, {
-        children: [jsxs(ToolBarHeader, {
-          children: [listTitle && this.state.currentListPage === 0 && jsx(MarginTop, {
-            children: jsxs(ObjectArrayTitle, {
-              children: [listTitle, " ", jsx("span", {
-                children: additionalProps.required && '(required)'
-              }), this.state.maxItemsError && jsx("span", {
-                style: {
-                  color: 'red',
-                  marginLeft: '1rem'
-                },
-                children: this.state.maxItemsError
-              })]
-            })
-          }), this.state.currentListPage === 0 && data === 0 && jsx(ObjectArrayToolBar, {
-            data: data,
-            errors: errors,
-            label: label,
-            addItem: (path, value) => () => {
-              this.addItem(path, value);
-            },
-            numColumns: 0,
-            path: path,
-            uischema: controlElement,
-            schema: schema,
-            rootSchema: rootSchema,
-            enabled: enabled,
-            setCurrentListPage: listPage => {
-              this.setState({
-                currentListPage: listPage
-              });
-            },
-            currentListPage: this.state.currentListPage,
-            buttonType: "secondary"
-          })]
-        }), jsx("div", {
-          children: jsx(ObjectArrayList, Object.assign({
-            path: path,
-            schema: schema,
-            uischema: uischema,
-            enabled: enabled,
-            openDeleteDialog: openDeleteDialog,
-            translations: {},
-            data: data,
-            cells: cells,
-            config: config,
-            currentIndex: this.props.currentTab,
-            setCurrentIndex: this.props.setCurrentTab,
-            setCurrentListPage: listPage => {
-              this.setState({
-                currentListPage: listPage
-              });
-            },
-            errors: errors,
-            currentListPage: this.state.currentListPage,
-            listTitle: listTitle
-          }, additionalProps))
-        }), this.state.currentListPage === 0 && data > 0 && jsx(ObjectArrayToolBar, {
+      children: [jsxs(ToolBarHeader, {
+        children: [listTitle && this.state.currentListPage === 0 && jsx(MarginTop, {
+          children: jsxs(ObjectArrayTitle, {
+            children: [listTitle, " ", jsx("span", {
+              children: additionalProps.required && '(required)'
+            }), this.state.maxItemsError && jsx("span", {
+              style: {
+                color: 'red',
+                marginLeft: '1rem'
+              },
+              children: this.state.maxItemsError
+            })]
+          })
+        }), this.state.currentListPage === 0 && data === 0 && jsx(ObjectArrayToolBar, {
           data: data,
           errors: errors,
           label: label,
@@ -11800,9 +11768,51 @@ class ListWithDetailControl extends React.Component {
             });
           },
           currentListPage: this.state.currentListPage,
-          buttonType: "tertiary"
+          buttonType: "secondary"
         })]
-      })
+      }), jsx("div", {
+        children: jsx(ObjectArrayList, Object.assign({
+          path: path,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          openDeleteDialog: openDeleteDialog,
+          translations: {},
+          data: data,
+          cells: cells,
+          config: config,
+          currentIndex: this.props.currentTab,
+          setCurrentIndex: this.props.setCurrentTab,
+          setCurrentListPage: listPage => {
+            this.setState({
+              currentListPage: listPage
+            });
+          },
+          errors: errors,
+          currentListPage: this.state.currentListPage,
+          listTitle: listTitle
+        }, additionalProps))
+      }), this.state.currentListPage === 0 && data > 0 && jsx(ObjectArrayToolBar, {
+        data: data,
+        errors: errors,
+        label: label,
+        addItem: (path, value) => () => {
+          this.addItem(path, value);
+        },
+        numColumns: 0,
+        path: path,
+        uischema: controlElement,
+        schema: schema,
+        rootSchema: rootSchema,
+        enabled: enabled,
+        setCurrentListPage: listPage => {
+          this.setState({
+            currentListPage: listPage
+          });
+        },
+        currentListPage: this.state.currentListPage,
+        buttonType: "tertiary"
+      })]
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.42.1",
+  "version": "2.42.3",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",