@abgov/jsonforms-components 1.40.0 → 1.40.2

package/index.esm.js

@@ -1,12 +1,12 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
-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, GoASkeleton } from '@abgov/react-components';
+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 } from '@abgov/react-components';
 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, 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) => {
@@ -4419,7 +4428,7 @@ const TAB_KEY = 'Tab';
 let _$7 = t => t,
   _t$7,
   _t2$4,
-  _t3$3,
+  _t3$4,
   _t4$2;
 styled.div(_t$7 || (_t$7 = _$7`
   text-overflow: ellipsis;
@@ -4442,7 +4451,7 @@ const GoADropdownListContainerWrapper = styled.div(_t2$4 || (_t2$4 = _$7`
   position: relative;
   display: ${0};
 `), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$3 || (_t3$3 = _$7`
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$7`
   border: solid 1px var(--goa-color-greyscale-200);
   border-radius: var(--goa-space-2xs);
   background: var(--goa-color-greyscale-white);
@@ -5094,7 +5103,7 @@ const LayoutRenderer = ({
 let _$5 = t => t,
   _t$5,
   _t2$3,
-  _t3$2,
+  _t3$3,
   _t4$1,
   _t5$1,
   _t6$1,
@@ -5120,7 +5129,7 @@ const ReviewItemSection = styled.div(_t2$3 || (_t2$3 = _$5`
   border: 1px solid #dcdcdc;
   border-radius: 5px;
 `));
-const ReviewItemHeader = styled.div(_t3$2 || (_t3$2 = _$5`
+const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5593,7 +5602,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 +5622,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 +5634,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 */
@@ -5904,7 +5917,7 @@ const DeleteFileModal = ({
 let _$3 = t => t,
   _t$3,
   _t2$2,
-  _t3$1;
+  _t3$2;
 const DELAY_UPLOAD_TIMEOUT_MS = 5;
 const DELAY_DELETE_TIMEOUT_MS = 5;
 const FileUploaderReview = props => {
@@ -6075,7 +6088,7 @@ const AttachmentBorder = styled.div(_t2$2 || (_t2$2 = _$3`
   width: fit-content;
   margin-top: var(--goa-space-2xs);
 `));
-const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$3`
+const FileUploaderStyle = styled.div(_t3$2 || (_t3$2 = _$3`
   .label {
     display: block;
     font-weight: var(--goa-font-weight-bold);
@@ -6269,7 +6282,7 @@ $$8({ target: 'Object', stat: true }, {
 let _$2 = t => t,
   _t$2,
   _t2$1,
-  _t3,
+  _t3$1,
   _t4,
   _t5,
   _t6,
@@ -6288,7 +6301,7 @@ const NonEmptyCellStyle = styled.div(_t2$1 || (_t2$1 = _$2`
     background-color: #000:
   }
 `));
-const ToolBarHeader = styled.div(_t3 || (_t3 = _$2`
+const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
   margin-bottom: var(--goa-space-l);
 `));
 const ObjectArrayTitle = styled.h2(_t4 || (_t4 = _$2`
@@ -7412,7 +7425,8 @@ const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 
 let _$1 = t => t,
   _t$1,
-  _t2;
+  _t2,
+  _t3;
 const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
   position: relative;
 
@@ -7448,6 +7462,20 @@ const LabelDiv = styled.div(_t2 || (_t2 = _$1`
   font-size: var(--fs-sl);
   padding-bottom: 1.5rem;
 `));
+const ListItem = styled.li(_t3 || (_t3 = _$1`
+  background-color: ${0};
+  color: ${0};
+  font-weight: ${0};
+`), ({
+  selectedIndex,
+  index
+}) => selectedIndex === index ? 'var(--color-primary)' : '', ({
+  selectedIndex,
+  index
+}) => selectedIndex === index ? 'var(--color-white) !important' : '', ({
+  selectedIndex,
+  index
+}) => selectedIndex === index ? 'var(--fw-bold)' : '');
 
 const AddressInputs = ({
   address,
@@ -7626,7 +7654,7 @@ const fetchAddressSuggestions = (formUrl, searchTerm, isAlbertaAddress) => __awa
     const response = yield axios.get(formUrl, {
       params
     });
-    return response.data.Items || [];
+    return response.data.Items;
   } catch (error) {
     console.error('Error fetching address suggestions:', error);
     return [];
@@ -7904,6 +7932,8 @@ const AddressLookUpControl = props => {
     setAddress(updatedAddress);
     handleChange(path, updatedAddress);
   };
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const dropdownRef = useRef(null);
   const handleInputChange = (field, value) => {
     var _a, _b;
     let newAddress;
@@ -7935,14 +7965,15 @@ const AddressLookUpControl = props => {
       if (searchTerm.length > 2) {
         setLoading(true);
         setOpen(true);
-        const response = yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress);
-        const suggestions = filterSuggestionsWithoutAddressCount(response);
-        if (isAlbertaAddress) {
-          setSuggestions(filterAlbertaAddresses(suggestions));
-        } else {
-          setSuggestions(suggestions);
-        }
-        setLoading(false);
+        yield fetchAddressSuggestions(formUrl, searchTerm, isAlbertaAddress).then(response => {
+          const suggestions = filterSuggestionsWithoutAddressCount(response);
+          if (isAlbertaAddress) {
+            setSuggestions(filterAlbertaAddresses(suggestions));
+          } else {
+            setSuggestions(suggestions);
+          }
+          setLoading(false);
+        });
       } else {
         setSuggestions([]);
         setOpen(false);
@@ -7961,14 +7992,62 @@ const AddressLookUpControl = props => {
     setSuggestions([]);
     setErrors({});
   };
+  /* istanbul ignore next */
   const handleRequiredFieldBlur = name => {
-    if ((!(data === null || data === void 0 ? void 0 : data[name]) || (data === null || data === void 0 ? void 0 : data[name]) === '') && (requiredFields === null || requiredFields === void 0 ? void 0 : requiredFields.includes(name))) {
-      const err = Object.assign({}, errors);
-      err[name] = name === 'municipality' ? `city is required` : `${name} is required`;
+    const err = Object.assign({}, errors);
+    if ((data === null || data === void 0 ? void 0 : data["city"]) === undefined || (data === null || data === void 0 ? void 0 : data["city"]) === "") {
+      err[name] = name === 'municipality' ? 'city is required' : "";
+      setErrors(err);
+    }
+    if (!(data === null || data === void 0 ? void 0 : data[name]) || data[name] === '' || (data === null || data === void 0 ? void 0 : data[name]) === undefined) {
+      err[name] = name === 'municipality' ? 'city is required' : `${name} is required`;
+      setErrors(err);
+    }
+    if (!(data === null || data === void 0 ? void 0 : data[name])) {
+      err[name] = name === 'addressLine1' ? `${name} is required` : ``;
       setErrors(err);
     } else {
       delete errors[name];
     }
+    setTimeout(() => {
+      setSuggestions([]);
+      setOpen(false);
+    }, 100);
+  };
+  useEffect(() => {
+    if (dropdownRef.current) {
+      const selectedItem = dropdownRef.current.children[selectedIndex];
+      if (selectedItem) {
+        selectedItem.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [selectedIndex, open]);
+  /* istanbul ignore next */
+  const handleKeyDown = (e, value, key) => {
+    var _a;
+    if (key === 'ArrowDown') {
+      setSelectedIndex(prevIndex => prevIndex < suggestions.length - 1 ? prevIndex + 1 : 0);
+      handleDropdownChange(value);
+    } else if (key === 'ArrowUp') {
+      setSelectedIndex(prevIndex => prevIndex > 0 ? prevIndex - 1 : suggestions.length - 1);
+      handleDropdownChange(value);
+    } else if (key === 'Enter') {
+      handleDropdownChange(value);
+      setLoading(false);
+      if (selectedIndex >= 0) {
+        (_a = document.getElementById("goaInput")) === null || _a === void 0 ? void 0 : _a.blur();
+        const suggestion = suggestions[selectedIndex];
+        if (suggestion) {
+          setTimeout(() => {
+            handleSuggestionClick(suggestion);
+            setOpen(false);
+          }, 100);
+        }
+      }
+    }
   };
   const readOnly = (_f = (_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.readOnly) !== null && _f !== void 0 ? _f : false;
   return jsxs("div", {
@@ -7979,6 +8058,7 @@ const AddressLookUpControl = props => {
       children: jsxs(SearchBox, {
         children: [jsx(GoAInput, {
           leadingIcon: autocompletion && enabled ? 'search' : undefined,
+          id: "goaInput",
           name: "addressLine1",
           testId: "address-form-address1",
           readonly: readOnly,
@@ -7986,17 +8066,31 @@ const AddressLookUpControl = props => {
           ariaLabel: 'address-form-address1',
           placeholder: "Start typing the first line of your address, required.",
           value: (address === null || address === void 0 ? void 0 : address.addressLine1) || '',
-          onChange: (name, value) => handleDropdownChange(value),
+          onChange: (e, value) => {
+            handleDropdownChange(value);
+          },
           onBlur: name => handleRequiredFieldBlur(name),
-          width: "100%"
-        }), loading && autocompletion && jsx(GoASkeleton, {
-          type: "text",
-          "data-testId": "loading"
-        }, 1), suggestions && autocompletion && jsx("ul", {
+          width: "100%",
+          onKeyPress: (e, value, key) => {
+            if (open) {
+              handleKeyDown(e, value, key);
+            }
+          }
+        }), loading && autocompletion && jsx(GoACircularProgress, {
+          variant: "inline",
+          size: "small",
+          visible: true
+        }), suggestions && autocompletion && jsx("ul", {
+          ref: dropdownRef,
           className: "suggestions",
           tabIndex: 0,
-          children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx("li", {
-            onClick: e => handleSuggestionClick(suggestion),
+          children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx(ListItem, {
+            "data-index": index,
+            onClick: () => {
+              handleSuggestionClick(suggestion);
+            },
+            selectedIndex: selectedIndex,
+            index: index,
             children: `${suggestion.Text}  ${suggestion.Description}`
           }, index))
         })]
@@ -8185,7 +8279,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, {
@@ -8203,7 +8297,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",
@@ -8216,7 +8310,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, {
@@ -8384,7 +8478,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, {
@@ -8404,7 +8498,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",
@@ -8416,7 +8510,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, {
@@ -8437,7 +8531,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, {
@@ -8469,20 +8563,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.0",
+  "version": "1.40.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/AddressLookup/styled-components.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
+interface ListItemProps {
+    selectedIndex: number;
+    index: number;
+}
 export declare const SearchBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const LabelDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListItemProps>> & string;
+export {};

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;