@abgov/jsonforms-components 1.52.0 → 1.53.1

package/index.esm.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
 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, toDataPath, getControlPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import * as _$b from 'lodash';
 import { isEqual, isObject as isObject$f } from 'lodash';
@@ -5854,6 +5854,48 @@ 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').map(e => {
+    return getControlPath(e);
+  });
+  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
+  return _scopes;
+};
+const subErrorInParent = (error, paths) => {
+  /*
+    Detect is there sub error in an object array.
+    For example: error with instance path /roadmap/0/when belongs to /roadmap
+  */
+  const errorPaths = error.instancePath.split('/');
+  if (errorPaths.length < 3) return false;
+  if (isNumber(errorPaths[errorPaths.length - 2])) {
+    const parentPath = errorPaths.slice(0, errorPaths.length - 2).join('/');
+    return paths.includes(parentPath);
+  }
+  return false;
+};
+const getErrorsInScopes = (errors, scopes) => {
+  return errors.filter(e => {
+    // transfer scope #properties/value to data path /value
+    const dataPaths = scopes.map(s => '/' + toDataPath(s));
+    return dataPaths.includes(e.instancePath) || subErrorInParent(e, dataPaths);
+  });
+};
+
 const stepperReducer = (state, action) => {
   const {
     activeId,
@@ -5921,7 +5963,7 @@ const stepperReducer = (state, action) => {
           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, state.categories[id].scopes);
-        const errorsInCategory = errors.filter(e => categories[id].scopes.map(s => '/' + toDataPath(s)).includes(e.instancePath));
+        const errorsInCategory = getErrorsInScopes(errors, state.categories[id].scopes || []);
         state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
         state.categories[id].isValid = errorsInCategory.length === 0;
         return Object.assign({}, state);
@@ -5939,24 +5981,6 @@ const stepperReducer = (state, action) => {
   }
 };
 
-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 + '.');
-  });
-};
-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').map(e => {
-    return getControlPath(e);
-  });
-  const _scopes = scopes.map(scope => toDataPath(scope)).filter(path => requiredErrorPaths && isErrorPathIncluded(requiredErrorPaths, path));
-  return _scopes;
-};
 const createStepperContextInitData = props => {
   var _a;
   const {
@@ -6156,7 +6180,7 @@ const FormStepperView = props => {
             return jsx(GoAFormStep, {
               "data-testid": `stepper-tab-${index}`,
               text: `${c.label}`,
-              status: c.isCompleted && c.isValid ? 'complete' : 'incomplete'
+              status: c.isVisited ? c.isCompleted && c.isValid ? 'complete' : 'incomplete' : undefined
             }, `stepper-tab-${index}`);
           }), jsx(GoAFormStep, {
             text: "Review"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.52.0",
+  "version": "1.53.1",
   "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/StepperContext.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode, Dispatch } from 'react';
 import { CategorizationStepperLayoutRendererProps } from '../types';
 import { StepperContextDataType, CategoryState } from './types';
-import Ajv from 'ajv';
 import { JsonFormStepperDispatch } from './reducer';
 export interface JsonFormsStepperContextProviderProps {
     children: ReactNode;
@@ -21,7 +20,5 @@ export interface JsonFormsStepperContextProps {
     goToPage: (id: number, updateCategoryId?: number) => void;
     isProvided?: boolean;
 }
-export declare const isErrorPathIncluded: (errorPaths: string[], path: string) => boolean;
-export declare const getIncompletePaths: (ajv: Ajv, scopes: string[]) => string[];
 export declare const JsonFormsStepperContext: import("react").Context<JsonFormsStepperContextProps | undefined>;
 export declare const JsonFormsStepperContextProvider: ({ children, StepperProps, }: JsonFormsStepperContextProviderProps) => JSX.Element;

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

@@ -1,3 +1,4 @@
 export * from './StepperContext';
 export * from './types';
 export * from './reducer';
+export * from './util';

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

@@ -0,0 +1,4 @@
+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 getErrorsInScopes: (errors: ErrorObject[], scopes: string[]) => ErrorObject[];