@abgov/jsonforms-components 1.53.0 → 1.53.2

package/index.esm.js

@@ -1,11 +1,11 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 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';
@@ -3081,14 +3081,14 @@ const onChangeForCheckboxData = (data, name, value) => data ? !value ? data ===
 
 let _$a = t => t,
   _t$a,
-  _t2$6;
+  _t2$7;
 styled.div(_t$a || (_t$a = _$a`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$6 || (_t2$6 = _$a`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$a`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -3849,10 +3849,26 @@ const JsonFormRegisterProvider = ({
 };
 
 let _$9 = t => t,
-  _t$9;
+  _t$9,
+  _t2$6,
+  _t3$5;
 const FormFieldWrapper = styled.div(_t$9 || (_t$9 = _$9`
   margin-bottom: var(--goa-space-l);
 `));
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$9`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+  font-size: var(--goa-font-size-2);
+  color: var(--goa-color-interactive-error);
+`));
+const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$9`
+  color: var(--goa-color-greyscale-700);
+  font-weight: var(--goa-font-weight-regular);
+  font-size: var(--goa-font-size-2);
+  line-height: var(--goa-line-height-1);
+  font-style: normal;
+`));
 
 const GoAInputBaseControl = props => {
   var _a, _b;
@@ -5234,24 +5250,57 @@ const EnumCheckboxControl = props => {
 const GoAEnumCheckboxGroupControl = withJsonFormsEnumProps(withTranslateProps(EnumCheckboxControl), true);
 const GoACheckoutGroupControlTester = rankWith(18, and(isEnumControl, optionIs('format', 'checkbox')));
 
+const warningIcon = errorMessage => {
+  return jsxs(WarningIconDiv, {
+    children: [jsx(GoAIcon, {
+      type: "warning",
+      size: "small",
+      theme: "filled",
+      mt: "2xs"
+    }), errorMessage]
+  });
+};
 const GoABaseInputReviewComponent = props => {
+  var _a, _b, _c, _d, _e;
   // eslint-disable-next-line
   const {
     data,
-    id
+    id,
+    uischema,
+    schema,
+    required
   } = props;
   let reviewText = data;
   const isBoolean = typeof data === 'boolean';
+  const requiredText = `${((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text) ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.text : (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : schema === null || schema === void 0 ? void 0 : schema.description}${required ? ' is required.' : ''}`;
+  const renderRequiredLabel = () => {
+    return data !== undefined && schema.type === 'boolean' && required ? jsx(RequiredTextLabel, {
+      children: ` (required)`
+    }) : null;
+  };
+  const renderWarningMessage = () => {
+    var _a;
+    if ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.radio) return null;
+    if (schema.type === 'boolean' && required && data === undefined) {
+      return warningIcon(requiredText.trim());
+    }
+    return null;
+  };
   if (isBoolean) {
-    reviewText = data ? 'Yes' : 'No';
+    const label = (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.trim();
+    if (((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.radio) === true) {
+      reviewText = data ? `Yes` : `No`;
+    } else {
+      reviewText = data ? `Yes (${label})` : `No (${label})`;
+    }
   }
-  return jsx("div", {
+  return jsxs("div", {
     style: {
       textWrap: 'wrap',
       wordBreak: 'break-word'
     },
     "data-testid": `review-control-${id}`,
-    children: reviewText
+    children: [reviewText, renderRequiredLabel(), renderWarningMessage()]
   });
 };
 const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -5854,6 +5903,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 +6012,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 +6030,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 +6229,7 @@ const FormStepperView = props => {
             return jsx(GoAFormStep, {
               "data-testid": `stepper-tab-${index}`,
               text: `${c.label}`,
-              status: c.isCompleted && c.isValid && c.isVisited ? '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.53.0",
+  "version": "1.53.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/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[];

package/src/lib/Controls/Inputs/InputBaseReviewControl.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { CellProps, WithClassname, ControlProps } from '@jsonforms/core';
+import { CellProps, WithClassname, ControlProps, StatePropsOfControl } from '@jsonforms/core';
 import { WithInputProps } from './type';
-export type WithBaseInputReviewProps = CellProps & WithClassname & WithInputProps;
+export type WithBaseInputReviewProps = CellProps & WithClassname & WithInputProps & StatePropsOfControl;
 export declare const GoABaseInputReviewComponent: (props: WithBaseInputReviewProps) => JSX.Element;
 export declare const GoInputBaseReview: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoInputBaseReviewControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/style-component.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
 export declare const FormFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const WarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RequiredTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;