@abgov/jsonforms-components 1.40.1 → 1.40.3

package/index.esm.js

@@ -6,7 +6,7 @@ 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, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, isControl, isScoped, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
-import { isEqual, isObject as isObject$e } from 'lodash';
+import { isEqual, isEmpty as isEmpty$2, isObject as isObject$e } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
@@ -2465,12 +2465,19 @@ const StepperContext = /*#__PURE__*/createContext({
 const isEmpty = value => {
   return value === undefined || value === null || typeof value === 'string' && value.length < 1;
 };
-const getCompletionStatus = (table, step) => {
+const getCompletionStatus = (table, step, isFormChanged = false) => {
   const nonEmptyCount = getNonEmptyCount(table, step);
+  const requiredCount = getRequiredCount(table, step);
   if (nonEmptyCount === 0) {
-    return undefined;
+    if (!isFormChanged) {
+      return undefined;
+    }
+    if (requiredCount === 0) {
+      return 'complete';
+    } else {
+      return 'incomplete';
+    }
   }
-  const requiredCount = getRequiredCount(table, step);
   const requiredNonEmptyCount = getNonEmptyRequiredCount(table, step);
   if (requiredNonEmptyCount === requiredCount) {
     return 'complete';
@@ -2478,7 +2485,9 @@ const getCompletionStatus = (table, step) => {
   return 'incomplete';
 };
 const getNonEmptyCount = (table, step) => {
-  const nonEmptyStatuses = Object.keys(table).filter(k => table[k].step === step && !isEmpty(table[k].value));
+  const nonEmptyStatuses = Object.keys(table).filter(k => {
+    return table[k].step === step && !isEmpty(table[k].value);
+  });
   return nonEmptyStatuses.length;
 };
 const getRequiredCount = (table, step) => {
@@ -4415,6 +4424,7 @@ const ESCAPE_KEY = 'Escape';
 const ARROW_DOWN_KEY = 'ArrowDown';
 const ARROW_UP_KEY = 'ArrowUp';
 const TAB_KEY = 'Tab';
+const SPACE_KEY = ' ';
 
 let _$7 = t => t,
   _t$7,
@@ -4461,7 +4471,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
   }
   &:hover {
     background-color: var(--goa-color-interactive-hover) !important;
-    color: white !important;
+    color: var(--goa-color-text-light) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
 const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
@@ -4488,7 +4498,7 @@ const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
   }
   &:focus-within {
     caret-color: transparent;
-    color: ${0} !important;
+    color: 'var(--goa-color-text-light) !important';
     background-color: var(--goa-color-interactive-hover) !important;
   }
   .dropDownListItem:focus-visible {
@@ -4496,7 +4506,7 @@ const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$7`
     outline: none !important;
     color: ${0};
   }
-`), p => p.isSelected ? 'white' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'white' : 'var(--goa-color-interactive-hover)', p => p.isSelected ? 'white' : 'var(--goa-color-interactive-hover) !important');
+`), p => p.isSelected ? 'var(--goa-color-text-light)' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-text-light)' : 'var(--goa-color-interactive-hover) !important');
 
 const isValidKey = keyCode => {
   if (keyCode === 'Shift' || keyCode === 'Alt') return false;
@@ -4582,7 +4592,7 @@ const Dropdown = props => {
   /* istanbul ignore next */
   const handleKeyDown = e => {
     var _a, _b, _c;
-    if (e.key === ENTER_KEY) {
+    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
       setIsOpen(previousIsOpen => !previousIsOpen);
       const el = document.getElementById(`${PREFIX}-${label}-${(_a = items.at(0)) === null || _a === void 0 ? void 0 : _a.value}`);
       setElementFocus(e, el, false);
@@ -4619,7 +4629,7 @@ const Dropdown = props => {
   };
   const handDropDownItemOnKeyDown = (e, item) => {
     var _a, _b, _c, _d;
-    if (e.key === ENTER_KEY) {
+    if (e.key === ENTER_KEY || e.key === SPACE_KEY) {
       updateDropDownData(item);
       const inputEl = document.getElementById(`${id}-input`);
       if (inputEl) {
@@ -5593,7 +5603,7 @@ const FormStepper = props => {
   useEffect(() => {
     const statuses = Array(categories.length);
     categories.forEach((_, i) => {
-      statuses[i] = getCompletionStatus(inputStatuses, i + 1);
+      statuses[i] = isEmpty$2(stepStatuses[i]) ? getCompletionStatus(inputStatuses, i + 1) : stepStatuses[i];
     });
     setStepStatuses(statuses);
   }, [inputStatuses, categories]);
@@ -5613,7 +5623,7 @@ const FormStepper = props => {
     return jsx(Fragment, {});
   }
   function nextPage(page, disabled) {
-    const pageStatus = getCompletionStatus(inputStatuses, page);
+    const pageStatus = getCompletionStatus(inputStatuses, page, true);
     const statuses = [...stepStatuses];
     statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
     setStepStatuses(statuses);
@@ -5625,6 +5635,10 @@ const FormStepper = props => {
     setPage(page);
   }
   function prevPage(page, disabled) {
+    const pageStatus = getCompletionStatus(inputStatuses, page, true);
+    const statuses = [...stepStatuses];
+    statuses[page - 1] = pageStatus ? pageStatus : 'incomplete';
+    setStepStatuses(statuses);
     page--;
     while (page >= 0 && disabled[page - 1]) {
       /* istanbul ignore next */
@@ -8266,7 +8280,7 @@ const NameInputs = ({
     testId: "wrapper",
     children: [jsx(GoAFormItem, {
       testId: "formitem-first-name",
-      label: "First Name",
+      label: "First name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
       error: (_a = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _a !== void 0 ? _a : '',
       children: jsx(GoAInput, {
@@ -8284,7 +8298,7 @@ const NameInputs = ({
       })
     }), jsx(GoAFormItem, {
       testId: "formitem-middle-name",
-      label: "Middle Name",
+      label: "Middle name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('middleName')) ? 'required' : undefined,
       children: jsx(GoAInput, {
         type: "text",
@@ -8297,7 +8311,7 @@ const NameInputs = ({
       })
     }), jsx(GoAFormItem, {
       testId: "formitem-last-name",
-      label: "Last Name",
+      label: "Last name",
       requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
       error: (_b = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _b !== void 0 ? _b : '',
       children: jsx(GoAInput, {
@@ -8465,7 +8479,7 @@ const FullNameDobControl = props => {
       minChildWidth: "0ch",
       gap: "s",
       children: [jsx(GoAFormItem, {
-        label: "First Name",
+        label: "First name",
         requirement: ((_a = schema === null || schema === void 0 ? void 0 : schema.required) === null || _a === void 0 ? void 0 : _a.includes('firstName')) ? 'required' : undefined,
         error: (_b = errors === null || errors === void 0 ? void 0 : errors['firstName']) !== null && _b !== void 0 ? _b : '',
         children: jsx(GoAInput, {
@@ -8485,7 +8499,7 @@ const FullNameDobControl = props => {
           width: "100%"
         })
       }), jsx(GoAFormItem, {
-        label: "Middle Name",
+        label: "Middle name",
         requirement: ((_c = schema === null || schema === void 0 ? void 0 : schema.required) === null || _c === void 0 ? void 0 : _c.includes('middleName')) ? 'required' : undefined,
         children: jsx(GoAInput, {
           type: "text",
@@ -8497,7 +8511,7 @@ const FullNameDobControl = props => {
           width: "100%"
         })
       }), jsx(GoAFormItem, {
-        label: "Last Name",
+        label: "Last name",
         requirement: ((_d = schema === null || schema === void 0 ? void 0 : schema.required) === null || _d === void 0 ? void 0 : _d.includes('lastName')) ? 'required' : undefined,
         error: (_e = errors === null || errors === void 0 ? void 0 : errors['lastName']) !== null && _e !== void 0 ? _e : '',
         children: jsx(GoAInput, {
@@ -8518,7 +8532,7 @@ const FullNameDobControl = props => {
       minChildWidth: "0ch",
       gap: "s",
       children: jsx(GoAFormItem, {
-        label: "Date of Birth",
+        label: "Date of birth",
         error: (_f = errors === null || errors === void 0 ? void 0 : errors['dateOfBirth']) !== null && _f !== void 0 ? _f : '',
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('dateOfBirth')) ? 'required' : undefined,
         children: jsx(GoAInput, {
@@ -8550,20 +8564,20 @@ const FullNameDobReviewControl = props => {
       minChildWidth: "0ch",
       gap: "s",
       children: [jsx(GoAFormItem, {
-        label: "First Name",
+        label: "First name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('firstName')) ? 'required' : undefined,
         children: jsx("div", {
           "data-testid": `firstName-control-${props.id}`,
           children: (_a = props.data) === null || _a === void 0 ? void 0 : _a.firstName
         })
       }), jsx(GoAFormItem, {
-        label: "Middle Name",
+        label: "Middle name",
         children: jsx("div", {
           "data-testid": `middleName-control-${props.id}`,
           children: (_b = props.data) === null || _b === void 0 ? void 0 : _b.middleName
         })
       }), jsx(GoAFormItem, {
-        label: "Last Name",
+        label: "Last name",
         requirement: (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes('lastName')) ? 'required' : undefined,
         children: jsx("div", {
           "data-testid": `lastName-control-${props.id}`,

package/package.json

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

package/src/lib/Components/DropDownTypes.d.ts

@@ -32,3 +32,6 @@ export declare const ESCAPE_KEY = "Escape";
 export declare const ARROW_DOWN_KEY = "ArrowDown";
 export declare const ARROW_UP_KEY = "ArrowUp";
 export declare const TAB_KEY = "Tab";
+export declare const SPACE_KEY = " ";
+export declare const ALT_KEY = "Alt";
+export declare const SHIFT_KEY = "Shift";

package/src/lib/Controls/FormStepper/StepperContext.d.ts

@@ -15,5 +15,5 @@ export declare const StepperContext: import("react").Context<{
     isInitialized: (_: string) => boolean;
     stepId: number;
 }>;
-export declare const getCompletionStatus: (table: StatusTable, step: number) => GoAFormStepStatusType | undefined;
+export declare const getCompletionStatus: (table: StatusTable, step: number, isFormChanged?: boolean) => GoAFormStepStatusType | undefined;
 export declare const logRequiredFields: (table: StatusTable, step: number) => void;