@abgov/jsonforms-components 2.1.5 → 2.2.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as runtime from 'react/jsx-runtime';
 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, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoATable, GoABadge, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
@@ -5435,7 +5435,9 @@ let _$6 = t => t,
   _t14$1,
   _t15$1,
   _t16$1,
-  _t17$1;
+  _t17$1,
+  _t18$1,
+  _t19$1;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -5536,6 +5538,13 @@ const TableReviewPageTitleRow = styled.div(_t16$1 || (_t16$1 = _$6`
 const TableReviewCategoryLabel = styled.h3(_t17$1 || (_t17$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
 `));
+const TocStatus = styled.td(_t18$1 || (_t18$1 = _$6`
+  width: var(--goa-space-xl);
+  padding-right: var(--goa-space-xl);
+`));
+const TocPageRef = styled.td(_t19$1 || (_t19$1 = _$6`
+  padding-left: var(--goa-space-xl);
+`));
 
 class ContextProviderClass {
   addDataByUrl(key, url, processDataFunction, token) {
@@ -6485,6 +6494,55 @@ const BackButton = ({
   });
 };
 
+var PageStatus;
+(function (PageStatus) {
+  PageStatus["Complete"] = "Completed";
+  PageStatus["Incomplete"] = "Incomplete";
+  PageStatus["NotStarted"] = "Not started";
+})(PageStatus || (PageStatus = {}));
+const getPageStatus = category => {
+  const status = category.isVisited ? category.isCompleted && category.isValid ? PageStatus.Complete : PageStatus.Incomplete : PageStatus.NotStarted;
+  const badgeType = status === PageStatus.Complete ? 'success' : 'information';
+  return jsx(GoABadge, {
+    type: badgeType,
+    content: status,
+    ariaLabel: status
+  });
+};
+/* eslint-disable jsx-a11y/anchor-is-valid */
+const TableOfContents = props => {
+  var _a;
+  const testid = 'table-of-contents';
+  return jsx(PageBorder, {
+    children: jsx("div", {
+      "data-testid": testid,
+      children: jsx(GoATable, {
+        width: "100%",
+        children: jsx("tbody", {
+          children: (_a = props.categories) === null || _a === void 0 ? void 0 : _a.map((category, index) => {
+            return jsxs("tr", {
+              children: [jsx(TocPageRef, {
+                children: jsx("a", {
+                  "data-testid": `page-ref-${index}`,
+                  href: "#",
+                  onClick: e => {
+                    e.preventDefault();
+                    props.onClick(index);
+                  },
+                  children: category.label
+                })
+              }), jsx(TocStatus, {
+                children: getPageStatus(category)
+              })]
+            });
+          })
+        })
+      })
+    })
+  });
+};
+rankWith(1, uiTypeIs('TaskSection'));
+
 const FormStepperPageReviewer = props => {
   const {
     uischema,
@@ -6579,35 +6637,18 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const FormPageStepper = props => {
-  const formStepperCtx = useContext(JsonFormsStepperContext);
-  /**
-   * StepperCtx can only be provided once to prevent issues from categorization in categorization
-   *  */
-  if ((formStepperCtx === null || formStepperCtx === void 0 ? void 0 : formStepperCtx.isProvided) === true) {
-    return jsx(FormPagesView, Object.assign({}, props));
-  }
-  return jsx(JsonFormsStepperContextProvider, {
-    StepperProps: Object.assign({}, props),
-    children: jsx(FormPagesView, Object.assign({}, props))
-  });
-};
-const FormPagesView = props => {
+const RenderPages = props => {
   const {
-    uischema,
     data,
     schema,
     path,
     cells,
     renderers,
-    visible,
-    t
-  } = props;
+    visible
+  } = props.categoryProps;
   const enumerators = useContext(JsonFormContext);
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
-    validatePage,
     goToPage,
     toggleShowReviewLink
   } = formStepperCtx;
@@ -6630,9 +6671,6 @@ const FormPagesView = props => {
   const onCloseModal = () => {
     setIsOpen(false);
   };
-  useEffect(() => {
-    validatePage(activeId);
-  }, [data]);
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: [jsx(Visible, {
@@ -6658,11 +6696,7 @@ const FormPagesView = props => {
                 style: {
                   marginTop: '1.5rem'
                 },
-                children: [index > 0 && jsx(BackButton, {
-                  testId: "back-button",
-                  link: () => goToPage(activeId - 1),
-                  text: "Back"
-                }), jsxs(PageRenderPadding, {
+                children: [props.renderBackButton(index, activeId), jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
                     children: ["Step ", index + 1, " of ", categories.length]
                   }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
@@ -6690,7 +6724,7 @@ const FormPagesView = props => {
             }
           }), isOnReview && jsxs("div", {
             "data-testid": "stepper-pages-review-page",
-            children: [jsx(FormStepperPageReviewer, Object.assign({}, props, {
+            children: [jsx(FormStepperPageReviewer, Object.assign({}, props.categoryProps, {
               navigationFunc: goToPage
             })), jsx(PageRenderPadding, {
               children: jsx(GoAButtonGroup, {
@@ -6727,6 +6761,68 @@ const FormPagesView = props => {
     })]
   });
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FormPageStepper = props => {
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  /**
+   * StepperCtx can only be provided once to prevent issues from categorization in categorization
+   *  */
+  if ((formStepperCtx === null || formStepperCtx === void 0 ? void 0 : formStepperCtx.isProvided) === true) {
+    return jsx(FormPagesView, Object.assign({}, props));
+  }
+  return jsx(JsonFormsStepperContextProvider, {
+    StepperProps: Object.assign({}, props),
+    children: jsx(FormPagesView, Object.assign({}, props))
+  });
+};
+const FormPagesView = props => {
+  const data = props.data;
+  const formStepperCtx = useContext(JsonFormsStepperContext);
+  const {
+    validatePage,
+    goToPage
+  } = formStepperCtx;
+  const {
+    categories,
+    activeId
+  } = formStepperCtx.selectStepperState();
+  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) {
+    const tocProps = {
+      categories,
+      onClick: handleGoToPage
+    };
+    return jsx(TableOfContents, Object.assign({}, tocProps));
+  } else {
+    return jsx(RenderPages, {
+      categoryProps: props,
+      renderBackButton: renderBackButton
+    });
+  }
+};
 const FormStepperPagesControl = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormPageStepper)));
 
 // Ensure that all children (Category) have valid elements or things tend
@@ -7558,11 +7654,16 @@ const renderCellColumn = ({
   }
   const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
   const nestedErrors = errors === null || errors === void 0 ? void 0 : errors.filter(e => e.instancePath.includes(path));
+  /* istanbul ignore next */
   if (typeof currentData === 'string') {
     return currentData;
   } else if (typeof currentData === 'object' || Array.isArray(currentData)) {
     const result = Object.keys(currentData);
-    if (result.length === 0) {
+    if (!isRequired && nestedErrors.length === 0) {
+      return jsx("pre", {
+        children: JSON.stringify(currentData, null, 2)
+      });
+    } else if (result.length === 0) {
       return renderWarningCell();
     } else if (result.length > 0 && (isObjectArrayEmpty(currentData) || nestedErrors.length > 0)) {
       return jsx("pre", {
@@ -7742,7 +7843,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
             const errorRow = errors === null || errors === void 0 ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
             return jsxs("tr", {
               children: [Object.keys(properties).map((element, ix) => {
-                var _a;
+                var _a, _b;
                 const dataObject = properties[element];
                 const schemaName = element;
                 const currentData = data && data[num] ? data[num][element] : '';
@@ -7762,7 +7863,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                       children: renderCellColumn({
                         currentData,
                         error: error === null || error === void 0 ? void 0 : error.message,
-                        isRequired: required === null || required === void 0 ? void 0 : required.includes(tableKeys[element]),
+                        isRequired: (_a = required === null || required === void 0 ? void 0 : required.includes(tableKeys[element])) !== null && _a !== void 0 ? _a : false,
                         errors: errors !== undefined ? errors : [],
                         count: count !== undefined ? count : -1,
                         element,
@@ -7774,7 +7875,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                 }
                 return jsx("td", {
                   children: jsx(GoAFormItem, {
-                    error: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '',
+                    error: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : '',
                     mb: errorRow && !error && '2xl' || 'xs',
                     children: dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoAInput, {
                       error: (error === null || error === void 0 ? void 0 : error.message.length) > 0,
@@ -8181,7 +8282,7 @@ const GenerateRows = (Cell, schema, rowPath, enabled, cells, uischema) => {
       cellPath: rowPath,
       enabled
     };
-    return jsx(Cell, Object.assign({}, props), rowPath);
+    return jsx(Cell, Object.assign({}, props), `${rowPath}`);
   }
 };
 const getValidColumnProps = scopedSchema => {
@@ -8269,19 +8370,19 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
   return jsxs(Fragment, {
     children: [
     // eslint-disable-next-line
-    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map(element => {
+    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map((element, index) => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
         uischema: element,
-        path: rowPath,
+        path: `${rowPath}-${index}`,
         enabled: enabled,
         renderers: renderers,
         cells: cells
       }, rowPath);
     }),
     // eslint-disable-next-line
-    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map(element => {
+    (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail) === null || _c === void 0 ? void 0 : _c.elements) === null || _d === void 0 ? void 0 : _d.map((element, index) => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
@@ -8290,7 +8391,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
         enabled: enabled,
         renderers: renderers,
         cells: cells
-      }, rowPath);
+      }, `${rowPath}-${index}`);
     }), ((_e = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _e === void 0 ? void 0 : _e.length) > 0 && jsx(JsonFormsDispatch, {
       schema: schema,
       uischema: uiSchemaElementsForNotDefined,
@@ -8298,7 +8399,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
       enabled: enabled,
       renderers: renderers,
       cells: cells
-    })]
+    }, `${rowPath}`)]
   });
 });
 const NonEmptyCell = ownProps => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.1.5",
+  "version": "2.2.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

@@ -0,0 +1,7 @@
+/// <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/TableOfContents.d.ts

@@ -0,0 +1,8 @@
+import { RankedTester } from '@jsonforms/core';
+import { CategoriesState } from './context';
+export interface TocProps {
+    categories: CategoriesState;
+    onClick: (id: number) => void;
+}
+export declare const TableOfContents: (props: TocProps) => JSX.Element;
+export declare const TableOfContentsTester: RankedTester;

package/src/lib/Controls/FormStepper/styled-components.d.ts

@@ -16,3 +16,5 @@ export declare const TableReviewItemSection: import("styled-components/dist/type
 export declare const TableReviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewPageTitleRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewCategoryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const TocStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const TocPageRef: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;