@abgov/jsonforms-components 2.5.0 → 2.5.1

package/index.esm.js

@@ -7482,8 +7482,6 @@ const FormStepperReviewer = props => {
 };
 const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
 
-const TABLE_CONTEXT_ID = 100001;
-
 const isErrorPathIncluded = (errorPaths, path) => {
   return errorPaths.some(ePath => {
     /**
@@ -7576,16 +7574,15 @@ const stepperReducer = (state, action) => {
           id
         } = action.payload;
         state.activeId = id;
-        if (id === TABLE_CONTEXT_ID) {
-          return Object.assign({}, state);
-        }
         if (id === lastId + 1) {
           state.isOnReview = true;
           state.hasNextButton = false;
           state.hasPrevButton = true;
           return Object.assign({}, state);
         } else {
-          state.categories[id].isVisited = true;
+          if (state.categories[id]) {
+            state.categories[id].isVisited = true;
+          }
           state.hasNextButton = id <= lastId;
           state.hasPrevButton = id !== 0;
           state.isOnReview = false;
@@ -7600,7 +7597,7 @@ const stepperReducer = (state, action) => {
           ajv,
           errors
         } = action.payload;
-        if (id === state.categories.length || id === TABLE_CONTEXT_ID) {
+        if (id === state.categories.length || id === state.categories.length + 1) {
           return Object.assign({}, state);
         }
         /*
@@ -7608,9 +7605,11 @@ const stepperReducer = (state, action) => {
          */
         const incompletePaths = getIncompletePaths(ajv, ((_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) || []);
-        state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
-        state.categories[id].isValid = errorsInCategory.length === 0;
-        state.categories[id].isVisited = true;
+        if (state.categories[id]) {
+          state.categories[id].isCompleted = (incompletePaths === null || incompletePaths === void 0 ? void 0 : incompletePaths.length) === 0;
+          state.categories[id].isValid = errorsInCategory.length === 0;
+          state.categories[id].isVisited = true;
+        }
         return Object.assign({}, state);
       }
     case 'validate/form':
@@ -7664,7 +7663,7 @@ const createStepperContextInitData = props => {
       visible
     };
   });
-  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || (isPage ? TABLE_CONTEXT_ID : 0);
+  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || (isPage ? categories.length + 1 : 0);
   return {
     categories: categories,
     activeId,
@@ -7714,7 +7713,7 @@ const JsonFormsStepperContextProvider = ({
         stepperDispatch({
           type: 'page/to/index',
           payload: {
-            id: TABLE_CONTEXT_ID
+            id: stepperState.categories.length + 1
           }
         });
       },
@@ -7778,7 +7777,7 @@ const JsonFormsStepperContextProvider = ({
           }))
         }
       });
-      if (stepperState.activeId != TABLE_CONTEXT_ID) {
+      if (stepperState.activeId !== stepperState.categories.length + 1) {
         context.goToPage(stepperState.maxReachedStep);
         context.goToPage(stepperState.activeId);
       }
@@ -8373,7 +8372,7 @@ const FormPagesView = props => {
   const handleGoToPage = index => {
     goToPage(index);
   };
-  if (TABLE_CONTEXT_ID === activeId) {
+  if (categories.length + 1 === activeId) {
     const tocProps = {
       categories,
       onClick: handleGoToPage,
@@ -10224,15 +10223,15 @@ const ListItem = styled.li(_t6 || (_t6 = _$1`
   padding: var(--goa-space-xs) var(--goa-space-2xs) var(--goa-space-xs) var(--goa-space-xs);
   margin-left: 0.25rem;
 `), ({
-  selectedIndex,
+  selected,
   index
-}) => selectedIndex === index ? 'var(--goa-color-interactive-default)' : '', ({
-  selectedIndex,
+}) => selected === index ? 'var(--goa-color-interactive-default)' : '', ({
+  selected,
   index
-}) => selectedIndex === index ? 'var(--goa-color-greyscale-white) !important' : '', ({
-  selectedIndex,
+}) => selected === index ? 'var(--goa-color-greyscale-white) !important' : '', ({
+  selected,
   index
-}) => selectedIndex === index ? '600' : '');
+}) => selected === index ? '600' : '');
 
 const AddressInputs = ({
   address,
@@ -10489,6 +10488,21 @@ function formatPostalCodeIfNeeded(input) {
   const after = cleaned.slice(3);
   return `${before} ${after}`;
 }
+function handleAddressKeyDown(key, value, activeIndex, suggestions, onInputChange, onSelect) {
+  if (key === 'ArrowDown') {
+    const newIndex = activeIndex < suggestions.length - 1 ? activeIndex + 1 : 0;
+    onInputChange(value);
+    return newIndex;
+  } else if (key === 'ArrowUp') {
+    const newIndex = activeIndex > 0 ? activeIndex - 1 : suggestions.length - 1;
+    onInputChange(value);
+    return newIndex;
+  } else if (key === 'Enter' && suggestions[activeIndex]) {
+    onInputChange(value);
+    onSelect(suggestions[activeIndex]);
+  }
+  return activeIndex;
+}
 
 let _ = t => t,
   _t,
@@ -10728,6 +10742,7 @@ const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
 const HelpContent = withJsonFormsControlProps(HelpContentComponent);
 const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
 
+//type DebounceValueType = string | boolean | number | Record<string, unknown>;
 /**
  * A helper util to return a value at a certain delay. The delay is reset if the value arg changes
  * @param value value to be returned after a period of delay
@@ -10737,11 +10752,9 @@ const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
-    // Update debounced value after delay
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
-    // Cancel the timeout if value changes (also on delay change or unmount)
     return () => {
       clearTimeout(handler);
     };
@@ -10787,10 +10800,9 @@ const AddressLookUpControl = props => {
   const requiredFields = schema.required;
   const [dropdownSelected, setDropdownSelected] = useState(false);
   const updateFormData = updatedAddress => {
-    setAddress(updatedAddress);
     handleChange(path, updatedAddress);
   };
-  const debouncedRenderAddress = useDebounce(searchTerm, 300);
+  const debouncedRenderAddress = useDebounce(searchTerm, 200);
   const [activeIndex, setActiveIndex] = useState(0);
   const dropdownRef = useRef(null);
   const handleInputChange = (field, value) => {
@@ -10826,29 +10838,38 @@ const AddressLookUpControl = props => {
     }));
   };
   useEffect(() => {
-    handleInputChange('addressLine1', searchTerm);
+    handleInputChange('addressLine1', debouncedRenderAddress);
   }, [debouncedRenderAddress]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {
     const fetchSuggestions = async () => {
-      if (searchTerm.length > 2 && dropdownSelected === false) {
+      if (debouncedRenderAddress.length > 2 && dropdownSelected === false) {
         setLoading(true);
         setOpen(true);
-        await fetchAddressSuggestions(formUrl, formatPostalCodeIfNeeded(searchTerm), isAlbertaAddress).then(response => {
-          const suggestions = filterSuggestionsWithoutAddressCount(response);
-          if (isAlbertaAddress) {
-            setSuggestions(filterAlbertaAddresses(suggestions));
-          } else {
-            setSuggestions(suggestions);
+        try {
+          await fetchAddressSuggestions(formUrl, formatPostalCodeIfNeeded(searchTerm), isAlbertaAddress).then(response => {
+            const suggestions = filterSuggestionsWithoutAddressCount(response);
+            if (isAlbertaAddress) {
+              setSuggestions(filterAlbertaAddresses(suggestions));
+            } else {
+              setSuggestions(suggestions);
+            }
+            setLoading(false);
+          });
+          // eslint-disable-next-line
+        } catch (error) {
+          if (error.name !== 'AbortError') {
+            console.error('Address fetch failed:', error);
           }
+        } finally {
           setLoading(false);
-        });
+        }
       } else {
         setSuggestions([]);
         setOpen(false);
       }
     };
     fetchSuggestions();
-  }, [searchTerm]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [debouncedRenderAddress]); // eslint-disable-line react-hooks/exhaustive-deps
   const handleDropdownChange = value => {
     setSearchTerm(value);
   };
@@ -10883,29 +10904,6 @@ const AddressLookUpControl = props => {
       }
     }
   }, [activeIndex]);
-  const handleKeyDown = (e, value, key) => {
-    var _a;
-    if (key === 'ArrowDown') {
-      setActiveIndex(prevIndex => prevIndex < suggestions.length - 1 ? prevIndex + 1 : 0);
-      handleInputChange('addressLine1', value);
-    } else if (key === 'ArrowUp') {
-      setActiveIndex(prevIndex => prevIndex > 0 ? prevIndex - 1 : suggestions.length - 1);
-      handleInputChange('addressLine1', value);
-    } else if (key === 'Enter') {
-      handleInputChange('addressLine1', value);
-      setLoading(false);
-      if (activeIndex >= 0) {
-        (_a = document.getElementById('goaInput')) === null || _a === void 0 ? void 0 : _a.blur();
-        const suggestion = suggestions[activeIndex];
-        if (suggestion) {
-          setTimeout(() => {
-            handleSuggestionClick(suggestion);
-            setOpen(false);
-          }, 50);
-        }
-      }
-    }
-  };
   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", {
     children: [renderHelp(), jsx("h3", {
@@ -10933,7 +10931,8 @@ const AddressLookUpControl = props => {
             width: "100%",
             onKeyPress: (e, value, key) => {
               if (open) {
-                handleKeyDown(e, value, key);
+                const newIndex = handleAddressKeyDown(key, value, activeIndex, suggestions, val => handleInputChange('addressLine1', val), suggestion => handleSuggestionClick(suggestion));
+                setActiveIndex(newIndex);
               }
             }
           }), loading && jsx("div", {
@@ -10955,8 +10954,9 @@ const AddressLookUpControl = props => {
             onClick: () => {
               handleSuggestionClick(suggestion);
             },
-            selectedIndex: activeIndex,
+            selected: activeIndex,
             index: index,
+            "data-testId": `listItem-${index}`,
             children: `${suggestion.Text}  ${suggestion.Description}`
           }, index))
         })]
@@ -11376,6 +11376,37 @@ const FullNameControlReview = props => {
 };
 const GoAInputBaseFullNameControlReview = withJsonFormsAllOfProps(FullNameControlReview);
 
+function useSyncAutofillFields(fields,
+// eslint-disable-next-line
+formData,
+// eslint-disable-next-line
+updateFormData,
+// eslint-disable-next-line
+handleRequiredFieldBlur) {
+  useEffect(() => {
+    const rAF = requestAnimationFrame(() => {
+      const timeout = setTimeout(() => {
+        const updated = {};
+        fields.forEach(field => {
+          const input = document.querySelector(`goa-input[name="${field}"]`);
+          if (input && input.value && !(formData === null || formData === void 0 ? void 0 : formData[field])) {
+            updated[field] = input.value;
+          }
+        });
+        if (Object.keys(updated).length > 0) {
+          const mergedData = Object.assign({}, formData, updated);
+          updateFormData(mergedData);
+          Object.keys(updated).forEach(name => {
+            handleRequiredFieldBlur(name, mergedData);
+          });
+        }
+      }, 50);
+      return () => clearTimeout(timeout);
+    });
+    return () => cancelAnimationFrame(rAF);
+  }, [formData]);
+}
+
 const FullNameDobControl = props => {
   var _a, _b, _c, _d, _e, _f;
   const {
@@ -11399,33 +11430,29 @@ const FullNameDobControl = props => {
   const [formData, setFormData] = useState(data || defaultNameAndDob);
   const updateFormData = updatedData => {
     updatedData = Object.fromEntries(Object.entries(updatedData).filter(([_, value]) => value !== ''));
+    setFormData(updatedData);
     handleChange(path, updatedData);
   };
   const handleInputChange = (field, value) => {
     const updatedData = Object.assign({}, formData, {
       [field]: value
     });
-    setFormData(updatedData);
-    updateFormData(updatedData);
-  };
-  const handleDobChange = (field, value) => {
-    const updatedData = Object.assign({}, formData, {
-      [field]: value
-    });
-    setFormData(updatedData);
     updateFormData(updatedData);
   };
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line
   const handleRequiredFieldBlur = (name, updatedData) => {
+    var _a, _b, _c, _d;
     const err = Object.assign({}, errors);
-    if ((!(data === null || data === void 0 ? void 0 : data[name]) || (data === null || data === void 0 ? void 0 : data[name]) === '') && requiredFields.includes(name) && (!updatedData)) {
-      const modifiedName = name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : name === 'dateOfBirth' ? 'Date of birth' : '';
+    const liveInputValue = (_d = (_b = (_a = updatedData === null || updatedData === void 0 ? void 0 : updatedData[name]) !== null && _a !== void 0 ? _a : data === null || data === void 0 ? void 0 : data[name]) !== null && _b !== void 0 ? _b : (_c = document.querySelector(`goa-input[name="${name}"]`)) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '';
+    if (requiredFields.includes(name) && liveInputValue.trim() === '') {
+      const modifiedName = name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : name === 'dateOfBirth' ? 'Date of birth' : name;
       err[name] = `${modifiedName} is required`;
     } else {
-      err[name] = '';
+      delete err[name];
     }
     setErrors(err);
   };
+  useSyncAutofillFields(['firstName', 'middleName', 'lastName', 'dateOfBirth'], formData, updateFormData, handleRequiredFieldBlur);
   return jsxs(Fragment, {
     children: [jsxs(GoAGrid, {
       minChildWidth: "0ch",
@@ -11435,13 +11462,14 @@ const FullNameDobControl = props => {
         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 : '',
+        testId: "form-item-first-name",
         children: jsx(GoAInput, {
           disabled: !enabled,
           type: "text",
           name: "firstName",
           testId: "name-form-first-name",
           ariaLabel: 'name-form-first-name',
-          value: formData.firstName || '',
+          value: formData.firstName,
           onChange: (name, value) => {
             handleInputChange(name, value);
           },
@@ -11475,9 +11503,10 @@ const FullNameDobControl = props => {
           testId: "name-form-last-name",
           ariaLabel: 'name-form-last-name',
           value: formData.lastName || '',
-          onChange: (name, value) => handleInputChange(name, value),
+          onChange: (name, value) => {
+            handleInputChange(name, value);
+          },
           onBlur: name => {
-            /* istanbul ignore next */
             handleRequiredFieldBlur(name);
           },
           width: "100%"
@@ -11501,7 +11530,7 @@ const FullNameDobControl = props => {
           ariaLabel: "dob-form-dateOfBirth",
           placeholder: "YYYY-MM-DD",
           value: formData === null || formData === void 0 ? void 0 : formData.dateOfBirth,
-          onChange: (name, value) => handleDobChange(name, value),
+          onChange: (name, value) => handleInputChange(name, value),
           onBlur: name => {
             /* istanbul ignore next */
             handleRequiredFieldBlur(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.5.0",
+  "version": "2.5.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/AddressLookup/styled-components.d.ts

@@ -1,5 +1,5 @@
 interface ListItemProps {
-    selectedIndex: number;
+    selected: 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;

package/src/lib/Controls/AddressLookup/utils.d.ts

@@ -10,3 +10,4 @@ export declare const handlePostalCodeValidation: (validatePc: boolean, message:
 export declare const formatPostalCode: (value: string) => string;
 export declare function detectPostalCodeType(input: string): 'full' | 'partial' | 'none';
 export declare function formatPostalCodeIfNeeded(input: string): string;
+export declare function handleAddressKeyDown(key: string, value: string, activeIndex: number, suggestions: Suggestion[], onInputChange: (value: string) => void, onSelect: (suggestion: Suggestion) => void): number;

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

@@ -27,4 +27,3 @@ export interface StepperContextDataType {
     maxReachedStep: number;
 }
 export type CategorizationElement = Category | Categorization;
-export declare const TABLE_CONTEXT_ID = 100001;

package/src/lib/util/useDebounce.d.ts

@@ -1,9 +1,7 @@
-type DebounceValueType = string | boolean | number | Record<string, unknown>;
 /**
  * A helper util to return a value at a certain delay. The delay is reset if the value arg changes
  * @param value value to be returned after a period of delay
  * @param delay time in ms to apply the delay
  * @returns value after the delay timer
  */
-export declare function useDebounce(value: DebounceValueType, delay: number): DebounceValueType;
-export {};
+export declare function useDebounce<T>(value: T, delay: number): T;

package/src/lib/util/useSyncAutofillFields.d.ts

@@ -0,0 +1 @@
+export declare function useSyncAutofillFields(fields: string[], formData: any, updateFormData: (data: any) => void, handleRequiredFieldBlur: (name: string, updatedData?: any) => void): void;