@abgov/jsonforms-components 2.21.0 → 2.21.2

package/index.esm.js

@@ -5,7 +5,7 @@ import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputD
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, getControlPath, toDataPath, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, toDataPath, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, useJsonForms, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsAllOfProps, withJsonFormsCellProps } from '@jsonforms/react';
 import * as _$a from 'lodash';
 import { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
@@ -7509,26 +7509,31 @@ const FormStepperReviewer = props => {
 };
 const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
 
-const isErrorPathIncluded = (errorPaths, path) => {
-  return errorPaths.some(ePath => {
-    /**
-     *  case A: errorPaths: [name] path: [name]
-     *
-     *  case B: errorPath: [name] path: [name.firstName]
-     * */
-    return ePath === path || path.startsWith(ePath + '.');
-  });
-};
 function isNumber(value) {
   return value != null && value !== '' && !isNaN(Number(value.toString()));
 }
-const getIncompletePaths = (ajv, scopes) => {
-  var _a;
-  const requiredErrorPaths = (_a = ajv === null || ajv === void 0 ? void 0 : ajv.errors) === null || _a === void 0 ? void 0 : _a.filter(e => e.keyword === 'required' || e.keyword === 'minLength' || e.keyword === 'minItems' || e.keyword === 'errorMessage').map(e => {
-    return getControlPath(e);
-  });
-  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
-  return _scopes;
+const getIncompletePaths = (ajv, schema, data, scopes) => {
+  var _a, _b, _c, _d;
+  const incomplete = [];
+  for (const scope of scopes) {
+    const path = toDataPath(scope);
+    const value = get$1(data, path);
+    const schemaPath = path.split('.');
+    let currentSchema = schema;
+    for (const key of schemaPath) {
+      if (!currentSchema || !currentSchema.properties || !currentSchema.properties[key]) {
+        currentSchema = null;
+        break;
+      }
+      currentSchema = currentSchema.properties[key];
+    }
+    const isRequired = schemaPath.length > 1 ? (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.properties) === null || _a === void 0 ? void 0 : _a[schemaPath[0]]) === null || _b === void 0 ? void 0 : _b.required) === null || _c === void 0 ? void 0 : _c.includes(schemaPath[1]) : (_d = schema === null || schema === void 0 ? void 0 : schema.required) === null || _d === void 0 ? void 0 : _d.includes(path);
+    const hasMinLength = (currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema.minLength) !== undefined;
+    if (isRequired && (value === undefined || value === null || value === '') || hasMinLength && typeof value === 'string' && value.length < currentSchema.minLength) {
+      incomplete.push(path);
+    }
+  }
+  return incomplete;
 };
 const subErrorInParent = (error, paths) => {
   /*
@@ -7556,6 +7561,10 @@ const getErrorsInScopes = (errors, scopes) => {
     return dataPaths.includes(e.instancePath) || subErrorInParent(e, dataPaths);
   });
 };
+const hasDataInScopes = (data, scopes) => {
+  const dataPaths = scopes.map(s => toDataPath(s));
+  return dataPaths.map(p => get$1(data, p)).some(data => data !== undefined);
+};
 const getLocalStorageKeyPrefix = () => {
   return window.location.href + '_' + new Date().toISOString().slice(0, 10);
 };
@@ -7645,15 +7654,21 @@ const stepperReducer = (state, action) => {
         const {
           id,
           ajv,
-          errors
+          errors = [],
+          schema,
+          data
         } = action.payload;
-        if (id === state.categories.length || id === state.categories.length + 1) {
+        if (id >= state.categories.length) {
           return Object.assign({}, state);
         }
-        /*
-          ctx.core.errors only includes required errors when the fields are touched. In this case, we still ajv to figure out the required errors at the very beginning.
-         */
-        const incompletePaths = getIncompletePaths(ajv, ((_a = state.categories[id]) === null || _a === void 0 ? void 0 : _a.scopes) || []);
+        if (schema && typeof schema === 'object') {
+          try {
+            ajv.validate(schema, data);
+          } catch (err) {
+            console.warn('AJV validation error:', err);
+          }
+        }
+        const incompletePaths = getIncompletePaths(ajv, schema, data, ((_a = state.categories[id]) === null || _a === void 0 ? void 0 : _a.scopes) || []);
         const errorsInCategory = getErrorsInScopes(errors, ((_b = state.categories[id]) === null || _b === void 0 ? void 0 : _b.scopes) || []);
         if (state.categories[id]) {
           state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
@@ -7665,7 +7680,7 @@ const stepperReducer = (state, action) => {
     case 'validate/form':
       {
         const {
-          errors
+          errors = []
         } = action.payload;
         state.isValid = errors.length === 0;
         return Object.assign({}, state);
@@ -7691,7 +7706,6 @@ const createStepperContextInitData = props => {
     schema,
     ajv,
     t,
-    visible,
     path
   } = props;
   const categorization = uischema;
@@ -7700,17 +7714,22 @@ const createStepperContextInitData = props => {
   const isCacheStatus = (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.cacheStatus;
   /* istanbul ignore next */
   const cachedStatus = isCacheStatus && getIsVisitFromLocalStorage() || [];
+  ajv.validate(schema, data);
   const categories = (_c = categorization.elements) === null || _c === void 0 ? void 0 : _c.map((c, id) => {
     const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
-    const incompletePaths = getIncompletePaths(ajv, scopes) || [];
+    const incompletePaths = getIncompletePaths(ajv, schema, data, scopes);
+    const hasAnyData = hasDataInScopes(data, scopes);
+    const isVisited = isCacheStatus ? cachedStatus.at(id) : hasAnyData;
+    const isCompleted = isVisited && incompletePaths.length === 0;
+    const isValid = isCompleted;
     return {
       id,
       label: deriveLabelForUISchemaElement(c, t),
       scopes,
       /* istanbul ignore next */
-      isVisited: isCacheStatus ? cachedStatus.at(id) : false,
-      isCompleted: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
-      isValid: (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0,
+      isVisited,
+      isCompleted,
+      isValid,
       uischema: c,
       showReviewPageLink: props.withBackReviewBtn || false,
       isEnabled: isEnabled(c, data, '', ajv),
@@ -7793,7 +7812,9 @@ const JsonFormsStepperContextProvider = ({
           payload: {
             errors: (_a = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _a === void 0 ? void 0 : _a.errors,
             id,
-            ajv
+            ajv,
+            schema,
+            data
           }
         });
       },
@@ -7807,7 +7828,9 @@ const JsonFormsStepperContextProvider = ({
               payload: {
                 errors: (_b = ctx === null || ctx === void 0 ? void 0 : ctx.core) === null || _b === void 0 ? void 0 : _b.errors,
                 id: i,
-                ajv
+                ajv,
+                schema,
+                data
               }
             });
           }
@@ -7834,7 +7857,7 @@ const JsonFormsStepperContextProvider = ({
         });
       }
     };
-  }, [stepperDispatch, stepperState, (_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors, ajv]);
+  }, [stepperDispatch, stepperState, (_b = ctx.core) === null || _b === void 0 ? void 0 : _b.errors, ajv, schema, data]);
   /* istanbul ignore next */
   useEffect(() => {
     const handleBeforeUnload = () => {
@@ -11812,6 +11835,9 @@ const FullNameDobControl = props => {
 
 const FullNameDobReviewControl = props => {
   var _a, _b, _c, _d;
+  const {
+    data
+  } = props;
   return jsxs(Fragment, {
     children: [jsxs(GoAGrid, {
       minChildWidth: "0ch",
@@ -11819,6 +11845,7 @@ const FullNameDobReviewControl = props => {
       mb: "m",
       children: [jsx(GoAFormItem, {
         label: "First name",
+        error: (data === null || data === void 0 ? void 0 : data.firstName) === undefined ? 'First name is required' : '',
         requirement: "required",
         children: jsx(TextWrapDiv, {
           children: jsx("div", {
@@ -11836,6 +11863,7 @@ const FullNameDobReviewControl = props => {
         })
       }), jsx(GoAFormItem, {
         label: "Last name",
+        error: (data === null || data === void 0 ? void 0 : data.lastName) === undefined ? 'Last name is required' : '',
         requirement: "required",
         children: jsx(TextWrapDiv, {
           children: jsx("div", {
@@ -11849,6 +11877,7 @@ const FullNameDobReviewControl = props => {
       gap: "s",
       children: jsx(GoAFormItem, {
         label: "Date of birth",
+        error: (data === null || data === void 0 ? void 0 : data.dateOfBirth) === undefined ? 'Date of birth is required' : '',
         requirement: "required",
         children: jsx(TextWrapDiv, {
           children: jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.21.0",
+  "version": "2.21.2",
   "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",

package/src/lib/Controls/FormStepper/context/reducer.d.ts

@@ -18,6 +18,8 @@ export type StepperAction = {
         errors?: ErrorObject[];
         id: number;
         ajv: Ajv;
+        schema: any;
+        data: any;
     };
 } | {
     type: 'validate/form';

package/src/lib/Controls/FormStepper/context/util.d.ts

@@ -1,6 +1,6 @@
 import Ajv, { ErrorObject } from 'ajv';
 export declare const isErrorPathIncluded: (errorPaths: string[], path: string) => boolean;
-export declare const getIncompletePaths: (ajv: Ajv, scopes: string[]) => string[];
+export declare const getIncompletePaths: (ajv: Ajv, schema: any, data: any, scopes: string[]) => string[];
 export declare const subErrorInParent: (error: ErrorObject, paths: string[]) => boolean;
 export declare const getErrorsInScopes: (errors: ErrorObject[], scopes: string[]) => ErrorObject[];
 export declare const hasDataInScopes: (data: object, scopes: string[]) => boolean;