@abgov/jsonforms-components 2.3.7 → 2.3.9

package/index.esm.js

@@ -3086,6 +3086,21 @@ const standardizeDate = date => {
     return undefined;
   }
 };
+const to12HourFormat = time24 => {
+  return UTCToFullLocalTime('2025-03-22 ' + time24, true).slice(-11);
+};
+const UTCToFullLocalTime = (fullTime, useUTC = false) => {
+  return new Date(fullTime).toLocaleString('en-CA', {
+    hour12: true,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    second: 'numeric',
+    minute: 'numeric',
+    timeZone: useUTC ? undefined : 'America/Edmonton'
+  }).replace('p.m.', 'PM').replace('a.m.', 'AM');
+};
 
 /**
  * Checks input controls data value to determine is required and has any data.
@@ -5737,6 +5752,8 @@ const GoABaseInputReviewComponent = props => {
   } = props;
   let reviewText = data;
   const isBoolean = typeof data === 'boolean';
+  const isTime = (schema === null || schema === void 0 ? void 0 : schema.type) === 'string' && (schema === null || schema === void 0 ? void 0 : schema.format) === 'time';
+  const isDateTime = (schema === null || schema === void 0 ? void 0 : schema.type) === 'string' && (schema === null || schema === void 0 ? void 0 : schema.format) === 'date-time';
   const getRequiredLabelText = () => {
     var _a, _b;
     let label = '';
@@ -5779,6 +5796,12 @@ const GoABaseInputReviewComponent = props => {
       }
     }
   }
+  if (isTime) {
+    reviewText = reviewText && to12HourFormat(reviewText);
+  }
+  if (isDateTime) {
+    reviewText = reviewText && UTCToFullLocalTime(reviewText);
+  }
   return jsxs("div", {
     style: {
       fontWeight: '400',
@@ -7170,7 +7193,7 @@ const ApplicationStatus = ({
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const TableOfContents = props => {
-  var _a;
+  var _a, _b;
   const testid = 'table-of-contents';
   return jsx(PageBorder, {
     children: jsxs("div", {
@@ -7183,8 +7206,8 @@ const TableOfContents = props => {
         children: props.subtitle
       }), jsx(GoATable, {
         width: "100%",
-        children: jsx("tbody", {
-          children: (_a = props.categories) === null || _a === void 0 ? void 0 : _a.map((category, index) => {
+        children: jsxs("tbody", {
+          children: [(_a = props.categories) === null || _a === void 0 ? void 0 : _a.map((category, index) => {
             return jsxs("tr", {
               children: [jsx(TocPageRef, {
                 children: jsx("a", {
@@ -7200,7 +7223,28 @@ const TableOfContents = props => {
                 children: getCategoryStatusBadge(category)
               })]
             });
-          })
+          }), jsxs("tr", {
+            children: [jsx(TocPageRef, {
+              children: jsx("a", {
+                "data-testid": `page-ref-${(_b = props.categories) === null || _b === void 0 ? void 0 : _b.length}`,
+                href: "#",
+                onClick: e => {
+                  var _a;
+                  e.preventDefault();
+                  props.onClick((_a = props.categories) === null || _a === void 0 ? void 0 : _a.length);
+                },
+                children: jsx("b", {
+                  children: "Summary"
+                })
+              })
+            }), jsxs(CategoryStatus, {
+              children: [jsx(GoABadge, {
+                type: props.isValid ? 'success' : 'information',
+                content: props.isValid ? 'Completed' : 'Incomplete',
+                ariaLabel: props.isValid ? 'Completed' : 'Incomplete'
+              }), props.isValid]
+            })]
+          })]
         })
       })]
     })
@@ -7446,7 +7490,8 @@ const FormPagesView = props => {
   } = formStepperCtx;
   const {
     categories,
-    activeId
+    activeId,
+    isValid
   } = formStepperCtx.selectStepperState();
   useEffect(() => {
     validatePage(activeId);
@@ -7476,7 +7521,8 @@ const FormPagesView = props => {
       categories,
       onClick: handleGoToPage,
       title: (_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.title,
-      subtitle: (_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.subtitle
+      subtitle: (_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.subtitle,
+      isValid: isValid
     };
     return jsx(TableOfContents, Object.assign({}, tocProps));
   } else {
@@ -9770,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;
@@ -9802,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({});
@@ -9812,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) => {
@@ -9847,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) {
@@ -9875,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);
@@ -10059,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
           })
@@ -10074,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
           })
@@ -10090,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.7",
+  "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/Controls/FormStepper/TableOfContents.d.ts

@@ -5,6 +5,7 @@ export interface TocProps {
     onClick: (id: number) => void;
     title: string | undefined;
     subtitle: string | undefined;
+    isValid: boolean;
 }
 export declare const TableOfContents: (props: TocProps) => JSX.Element;
 export declare const TableOfContentsTester: RankedTester;

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

@@ -1 +1,3 @@
 export declare const standardizeDate: (date: Date | string) => string | undefined;
+export declare const to12HourFormat: (time24: string) => string;
+export declare const UTCToFullLocalTime: (fullTime: string, useUTC?: boolean) => string;

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

@@ -2,3 +2,4 @@ export * from './inputControlUtils';
 export * from './style-component';
 export * from './type';
 export * from './stringUtils';
+export * from './dateUtils';

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 {};