@abgov/jsonforms-components 2.3.8 → 2.4.0

package/index.esm.js

@@ -6516,6 +6516,8 @@ const FormStepperReviewer = props => {
 };
 const FormStepperReviewControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperReviewer)));
 
+const TABLE_CONTEXT_ID = 100001;
+
 const isErrorPathIncluded = (errorPaths, path) => {
   return errorPaths.some(ePath => {
     /**
@@ -6608,7 +6610,10 @@ const stepperReducer = (state, action) => {
           id
         } = action.payload;
         state.activeId = id;
-        if (id > lastId) {
+        if (id === TABLE_CONTEXT_ID) {
+          return Object.assign({}, state);
+        }
+        if (id === lastId + 1) {
           state.isOnReview = true;
           state.hasNextButton = false;
           state.hasPrevButton = true;
@@ -6629,7 +6634,7 @@ const stepperReducer = (state, action) => {
           ajv,
           errors
         } = action.payload;
-        if (id === state.categories.length) {
+        if (id === state.categories.length || id === TABLE_CONTEXT_ID) {
           return Object.assign({}, state);
         }
         /*
@@ -6664,7 +6669,7 @@ const stepperReducer = (state, action) => {
 };
 
 const createStepperContextInitData = props => {
-  var _a;
+  var _a, _b;
   const {
     uischema,
     data,
@@ -6676,7 +6681,8 @@ const createStepperContextInitData = props => {
   } = props;
   const categorization = uischema;
   const valid = ajv.validate(schema, data || {});
-  const categories = (_a = categorization.elements) === null || _a === void 0 ? void 0 : _a.map((c, id) => {
+  const isPage = ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.variant) === 'pages';
+  const categories = (_b = categorization.elements) === null || _b === void 0 ? void 0 : _b.map((c, id) => {
     const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
     const incompletePaths = getIncompletePaths(ajv, scopes);
     return {
@@ -6692,7 +6698,7 @@ const createStepperContextInitData = props => {
       visible
     };
   });
-  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || 0;
+  const activeId = (props === null || props === void 0 ? void 0 : props.activeId) || (isPage ? TABLE_CONTEXT_ID : 0);
   return {
     categories: categories,
     activeId,
@@ -6738,6 +6744,14 @@ const JsonFormsStepperContextProvider = ({
       selectCategory: id => {
         return stepperState.categories[id];
       },
+      goToTableOfContext: () => {
+        stepperDispatch({
+          type: 'page/to/index',
+          payload: {
+            id: TABLE_CONTEXT_ID
+          }
+        });
+      },
       validatePage: id => {
         var _a;
         stepperDispatch({
@@ -6749,7 +6763,7 @@ const JsonFormsStepperContextProvider = ({
           }
         });
       },
-      goToPage: (id, updateCategoryId) => {
+      goToPage: id => {
         var _a, _b, _c;
         ajv.validate(schema, ((_a = ctx.core) === null || _a === void 0 ? void 0 : _a.data) || {});
         if (stepperState.isOnReview !== true) {
@@ -6798,8 +6812,10 @@ const JsonFormsStepperContextProvider = ({
           }))
         }
       });
-      context.goToPage(stepperState.maxReachedStep);
-      context.goToPage(stepperState.activeId);
+      if (stepperState.activeId != TABLE_CONTEXT_ID) {
+        context.goToPage(stepperState.maxReachedStep);
+        context.goToPage(stepperState.activeId);
+      }
     }
   }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
   return jsx(JsonFormsStepperContext.Provider, {
@@ -6990,56 +7006,6 @@ const FormStepperView = props => {
 };
 const FormStepperControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepper)));
 
-let _$5 = t => t,
-  _t$5;
-const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
-  .back-link::before {
-    content: '';
-    display: inline-block;
-    width: 42px;
-    height: 24px;
-    vertical-align: middle;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
-      center center no-repeat;
-  }
-
-  .back-link:visited::before,
-  .back-link:hover::before {
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
-      center center no-repeat;
-  }
-
-  .back-link {
-    margin-top: var(--goa-space-m);
-  }
-  display: inline-block;
-  color: #0070c4;
-  cursor: pointer;
-
-  on .goa-icon {
-    display: inline-block !important;
-    position: relative;
-    top: 3px;
-    right: 2px;
-    color: #0070c4;
-    margin-left: 4px;
-  }
-`));
-const BackButton = ({
-  text,
-  testId,
-  link
-}) => {
-  return jsx(BackButtonWrapper, {
-    "data-testid": "back-button-click",
-    onClick: link,
-    children: jsx("div", {
-      className: "back-link",
-      children: text
-    })
-  });
-};
-
 var aCallable$6 = aCallable$g;
 var toObject = toObject$8;
 var IndexedObject = indexedObject;
@@ -7341,6 +7307,56 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
+let _$5 = t => t,
+  _t$5;
+const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
+  .back-link::before {
+    content: '';
+    display: inline-block;
+    width: 42px;
+    height: 24px;
+    vertical-align: middle;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+      center center no-repeat;
+  }
+
+  .back-link:visited::before,
+  .back-link:hover::before {
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>')
+      center center no-repeat;
+  }
+
+  .back-link {
+    margin-top: var(--goa-space-m);
+  }
+  display: inline-block;
+  color: #0070c4;
+  cursor: pointer;
+
+  on .goa-icon {
+    display: inline-block !important;
+    position: relative;
+    top: 3px;
+    right: 2px;
+    color: #0070c4;
+    margin-left: 4px;
+  }
+`));
+const BackButton = ({
+  text,
+  testId,
+  link
+}) => {
+  return jsx(BackButtonWrapper, {
+    "data-testid": "back-button-click",
+    onClick: link,
+    children: jsx("div", {
+      className: "back-link",
+      children: text
+    })
+  });
+};
+
 const RenderPages = props => {
   const {
     data,
@@ -7354,7 +7370,8 @@ const RenderPages = props => {
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
     goToPage,
-    toggleShowReviewLink
+    toggleShowReviewLink,
+    goToTableOfContext
   } = formStepperCtx;
   const {
     categories,
@@ -7400,7 +7417,11 @@ const RenderPages = props => {
                 style: {
                   marginTop: '1.5rem'
                 },
-                children: [props.renderBackButton(index, activeId), jsxs(PageRenderPadding, {
+                children: [jsx(BackButton, {
+                  testId: "back-button",
+                  link: () => goToTableOfContext(),
+                  text: "Back"
+                }), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
                     children: ["Step ", index + 1, " of ", categories.length]
                   }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
@@ -7496,27 +7517,10 @@ const FormPagesView = props => {
   useEffect(() => {
     validatePage(activeId);
   }, [data]);
-  const [showTOC, setShowTOC] = useState(true);
   const handleGoToPage = index => {
-    setShowTOC(false);
     goToPage(index);
   };
-  // Make sure the back button on the first page takes us to the Table of Contents.
-  const renderBackButton = (index, activeId) => {
-    if (index > 0) {
-      return jsx(BackButton, {
-        testId: "back-button",
-        link: () => goToPage(activeId - 1),
-        text: "Back"
-      });
-    }
-    return jsx(BackButton, {
-      testId: "back-button",
-      link: () => setShowTOC(true),
-      text: "Back"
-    });
-  };
-  if (showTOC) {
+  if (TABLE_CONTEXT_ID === activeId) {
     const tocProps = {
       categories,
       onClick: handleGoToPage,
@@ -7527,8 +7531,7 @@ const FormPagesView = props => {
     return jsx(TableOfContents, Object.assign({}, tocProps));
   } else {
     return jsx(RenderPages, {
-      categoryProps: props,
-      renderBackButton: renderBackButton
+      categoryProps: props
     });
   }
 };
@@ -9816,6 +9819,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 +9872,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 +9881,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 +9917,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 +9942,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 +10125,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 +10141,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 +10159,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.4.0",
   "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/RenderPages.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="react" />
 import { CategorizationStepperLayoutRendererProps } from './types';
 export interface PageRenderingProps {
     categoryProps: CategorizationStepperLayoutRendererProps;
-    renderBackButton: (index: number, activeId: number) => JSX.Element;
 }
 export declare const RenderPages: (props: PageRenderingProps) => JSX.Element;

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

@@ -20,6 +20,7 @@ export interface JsonFormsStepperContextProps {
     selectPath: () => string;
     selectCategory: (id: number) => CategoryState;
     goToPage: (id: number, updateCategoryId?: number) => void;
+    goToTableOfContext: () => void;
     toggleShowReviewLink: (id: number) => void;
     validatePage: (id: number) => void;
     isProvided?: boolean;

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

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

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