@abgov/jsonforms-components 2.3.8 → 2.3.9

package/index.esm.js

@@ -9816,6 +9816,27 @@ const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
 const HelpContent = withJsonFormsControlProps(HelpContentComponent);
 const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
 
+/**
+ * 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
+ */
+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);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
 const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
 const AddressLookUpControl = props => {
   var _a, _b, _c, _d, _e, _f, _g;
@@ -9848,7 +9869,6 @@ const AddressLookUpControl = props => {
   }
   const [address, setAddress] = useState(data || defaultAddress);
   const [searchTerm, setSearchTerm] = useState('');
-  const [saveSearchTerm, setSaveSearchTerm] = useState(false);
   const [suggestions, setSuggestions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
@@ -9858,6 +9878,7 @@ const AddressLookUpControl = props => {
     setAddress(updatedAddress);
     handleChange(path, updatedAddress);
   };
+  const debouncedRenderAddress = useDebounce(searchTerm, 500);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const dropdownRef = useRef(null);
   const handleInputChange = (field, value) => {
@@ -9893,11 +9914,8 @@ const AddressLookUpControl = props => {
     }));
   };
   useEffect(() => {
-    if (saveSearchTerm) {
-      handleInputChange('addressLine1', searchTerm);
-      setSaveSearchTerm(false);
-    }
-  }, [saveSearchTerm]); // eslint-disable-line react-hooks/exhaustive-deps
+    handleInputChange('addressLine1', searchTerm);
+  }, [debouncedRenderAddress]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {
     const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
       if (searchTerm.length > 2 && dropdownSelected === false) {
@@ -9921,7 +9939,6 @@ const AddressLookUpControl = props => {
   }, [searchTerm]); // eslint-disable-line react-hooks/exhaustive-deps
   const handleDropdownChange = value => {
     setSearchTerm(value);
-    setSaveSearchTerm(true);
   };
   const handleSuggestionClick = suggestion => {
     const suggestAddress = mapSuggestionToAddress(suggestion);
@@ -10105,6 +10122,7 @@ const AddressViews = ({
         children: [jsx(GoAFormItem, {
           label: "Address line 1",
           error: (data === null || data === void 0 ? void 0 : data.addressLine1) === undefined ? 'addressLine1 is required' : '',
+          requirement: "required",
           children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.addressLine1
           })
@@ -10120,12 +10138,14 @@ const AddressViews = ({
         children: [jsx(GoAFormItem, {
           error: (data === null || data === void 0 ? void 0 : data.municipality) === undefined ? 'city is required' : '',
           label: "City",
+          requirement: "required",
           children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.municipality
           })
         }), jsx(GoAFormItem, {
           error: (data === null || data === void 0 ? void 0 : data.postalCode) === undefined ? 'postalCode is required' : '',
           label: "Postal Code",
+          requirement: "required",
           children: jsx(TextWrap, {
             children: data === null || data === void 0 ? void 0 : data.postalCode
           })
@@ -10136,6 +10156,7 @@ const AddressViews = ({
         children: [jsxs(GoAFormItem, {
           label: "Province",
           error: !isAlbertaAddress && (data === null || data === void 0 ? void 0 : data.subdivisionCode) === undefined ? 'Province is required' : '',
+          requirement: "required",
           children: [isAlbertaAddress && jsx("div", {
             "data-testid": "address-form-province-view",
             children: "Alberta"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "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/util/useDebounce.d.ts

@@ -0,0 +1,9 @@
+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 {};