@abgov/jsonforms-components 2.33.0 → 2.34.1

package/index.esm.js

@@ -8924,9 +8924,10 @@ const SummaryRow = ({
 };
 
 function mergeOrphanSections(sections) {
+  var _a;
   const result = [];
   for (const section of sections) {
-    const hasValidTitle = section.sectionTitle && section.sectionTitle.trim() !== '';
+    const hasValidTitle = ((_a = section.sectionTitle) === null || _a === void 0 ? void 0 : _a.trim()) !== '';
     if (hasValidTitle) {
       result.push(Object.assign({}, section, {
         categories: [...section.categories]
@@ -8945,73 +8946,57 @@ function mergeOrphanSections(sections) {
   return result;
 }
 function expandSections(inputArray) {
-  if (!inputArray || inputArray.length === 0) return [];
-  const originalSection = inputArray[0];
-  const categories = originalSection.categories || [];
-  return categories.map((category, index) => ({
-    sectionTitle: `${category.label} Section`,
-    categories: [category]
+  if (!(inputArray === null || inputArray === void 0 ? void 0 : inputArray.length)) return [];
+  const original = inputArray[0];
+  const categories = original.categories || [];
+  return categories.map(cat => ({
+    sectionTitle: `${cat.label} Section`,
+    categories: [cat]
   }));
 }
-/* eslint-disable jsx-a11y/anchor-is-valid */
+const shouldShow = cat => {
+  var _a, _b;
+  return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) !== false;
+};
+function updateCompletion(group, index) {
+  const category = group[index];
+  if (!shouldShow(category)) return category;
+  let endIndex = index;
+  while (endIndex + 1 < group.length && !shouldShow(group[endIndex + 1])) {
+    endIndex++;
+  }
+  const relevant = group.slice(index, endIndex + 1); // current + subsequent hidden
+  const newIsCompleted = relevant.every(cat => cat.isCompleted);
+  if (category.isCompleted === newIsCompleted) return category;
+  return Object.assign({}, category, {
+    isCompleted: newIsCompleted
+  });
+}
 const TaskList = ({
   categories,
   onClick,
   title,
   subtitle,
-  isValid
+  isValid,
+  hideSummary
 }) => {
   const testid = 'table-of-contents';
-  const sectioned = getCategorySections(categories);
-  const [completedGroups, setCompletedGroups] = useState(0);
-  const [total, setTotal] = useState(sectioned.filter(s => s.categories && s.sectionTitle).length);
-  const shouldShow = cat => {
-    var _a, _b;
-    return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) !== false;
-  };
-  const updateCompletion = (group, category, groupIndex) => {
-    let leftIndex = groupIndex;
-    while (leftIndex > 0 && !shouldShow(group[leftIndex - 1])) {
-      leftIndex--;
-    }
-    let rightIndex = groupIndex;
-    while (rightIndex < group.length - 1 && !shouldShow(group[rightIndex + 1])) {
-      rightIndex++;
-    }
-    const currentLocalGroup = group.slice(leftIndex, rightIndex + 1);
-    const modifyCategory = JSON.parse(JSON.stringify(category));
-    modifyCategory.isCompleted = currentLocalGroup.length === currentLocalGroup.filter(cat => cat.isCompleted).length;
-    return modifyCategory;
-  };
-  const showInTaskListList = categories.map(cat => {
-    var _a, _b, _c, _d;
-    return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) || ((_d = (_c = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.showInTaskList) === undefined;
-  });
+  // Merge and expand sections
+  const mergedSections = useMemo(() => {
+    let sections = mergeOrphanSections(getCategorySections(categories));
+    if (sections.length === 1) {
+      sections = expandSections(sections);
+    }
+    return sections;
+  }, [categories]);
+  // Derived values
+  const totalGroups = useMemo(() => mergedSections.filter(section => section.categories.some(shouldShow)).length, [mergedSections]);
+  const completedGroups = useMemo(() => mergedSections.filter(section => {
+    const visibleCats = section.categories.filter(shouldShow);
+    return visibleCats.length > 0 && visibleCats.every(cat => cat.isCompleted);
+  }).length, [mergedSections]);
   let globalIndex = 0;
   let sectionIndex = 1;
-  useEffect(() => {
-    let count = 0;
-    let mergedSections = mergeOrphanSections(sectioned);
-    if (mergedSections.length === 1) {
-      mergedSections = expandSections(mergedSections);
-      setTotal(mergedSections.length);
-    }
-    mergedSections.forEach(({
-      categories: group
-    }) => {
-      let countInGroup = 0;
-      group.forEach((category, groupIndex) => {
-        const modifyCategory = updateCompletion(group, category, groupIndex);
-        if (getCategoryStatus(modifyCategory) === 'Completed') {
-          countInGroup++;
-        }
-      });
-      if (countInGroup === group.length) {
-        count++;
-      }
-    });
-    setCompletedGroups(count);
-  }, [categories, sectioned]); // re-run whenever categories change
   return jsx(PageBorder, {
     children: jsxs("div", {
       "data-testid": testid,
@@ -9028,40 +9013,32 @@ const TaskList = ({
         children: subtitle
       }), jsx(ApplicationStatus, {
         completedGroups: completedGroups,
-        totalGroups: total
+        totalGroups: totalGroups
       }), jsx(GoATable, {
         width: "100%",
         children: jsxs("tbody", {
-          children: [sectioned.map(({
+          children: [mergedSections.map(({
             sectionTitle,
             categories: group
           }, index) => jsxs(React.Fragment, {
-            children: [sectionTitle && showInTaskListList[globalIndex] && jsx(SectionHeaderRow, {
+            children: [sectionTitle && group.some(shouldShow) && jsx(SectionHeaderRow, {
               title: sectionTitle,
               index: sectionIndex++
             }, `section-${sectionTitle}`), group.map((category, groupIndex) => {
-              const showCurrent = showInTaskListList[globalIndex];
-              const idx = globalIndex++; // renamed from `index` to avoid shadowing
-              let currentCategory = category;
-              const modifyCategory = updateCompletion(group, category, groupIndex);
-              const showGroupTaskListList = categories.map(cat => shouldShow(cat));
-              if (showGroupTaskListList.length > showGroupTaskListList.filter(item => item === true).length) {
-                currentCategory = modifyCategory;
-              }
-              if (showCurrent) {
-                return jsx(CategoryRow, {
-                  category: currentCategory,
-                  index: idx,
-                  onClick: onClick
-                }, `cat-${category.label}-${idx}`);
-              }
-              return null;
+              const showCurrent = shouldShow(category);
+              const idx = globalIndex++;
+              const currentCategory = showCurrent ? updateCompletion(group, groupIndex) : category;
+              return showCurrent ? jsx(CategoryRow, {
+                category: currentCategory,
+                index: idx,
+                onClick: onClick
+              }, `cat-${category.label}-${idx}`) : null;
             })]
-          }, index)), jsx(SummaryRow, {
+          }, index)), !hideSummary ? jsx(SummaryRow, {
             index: globalIndex,
             isValid: isValid,
             onClick: onClick
-          }, "task-list-table-summary")]
+          }, "task-list-table-summary") : null]
         })
       })]
     })
@@ -9214,7 +9191,7 @@ const BackButton = ({
 };
 
 const RenderPages = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     data,
     schema,
@@ -9240,6 +9217,8 @@ const RenderPages = props => {
   } = formStepperCtx.selectStepperState();
   const hideSubmit = (_b = (_a = props.categoryProps.uischema.options) === null || _a === void 0 ? void 0 : _a.hideSubmit) !== null && _b !== void 0 ? _b : false;
   const toAppOverviewLabel = (_d = (_c = props.categoryProps.uischema.options) === null || _c === void 0 ? void 0 : _c.toAppOverviewLabel) !== null && _d !== void 0 ? _d : 'Back to application overview';
+  const submissionLabel = (_f = (_e = props.categoryProps.uischema.options) === null || _e === void 0 ? void 0 : _e.submissionLabel) !== null && _f !== void 0 ? _f : 'Next';
+  const hideSummary = (_g = props.categoryProps.uischema.options) === null || _g === void 0 ? void 0 : _g.hideSummary;
   const submitFormFunction = enumerators === null || enumerators === void 0 ? void 0 : enumerators.submitFunction.get('submit-form');
   const submitForm = submitFormFunction && submitFormFunction();
   const saveFormFunction = enumerators === null || enumerators === void 0 ? void 0 : enumerators.saveFunction.get('save-form');
@@ -9287,6 +9266,8 @@ const RenderPages = props => {
               data
             };
             if (index === activeId && !isOnReview) {
+              const currentStep = index + 1 - categories.filter(c => !c.visible && c.id < index).length;
+              const totalSteps = categories.filter(c => c.visible).length;
               return jsxs("div", {
                 "data-testid": `step_${index}-content-pages`,
                 style: {
@@ -9294,7 +9275,7 @@ const RenderPages = props => {
                 },
                 children: [jsxs(PageRenderPadding, {
                   children: [jsxs("h3", {
-                    children: ["Step ", index + 1 - categories.filter(c => !c.visible && c.id < index).length, " of", ' ', categories.filter(c => c.visible).length]
+                    children: ["Step ", currentStep, " of ", totalSteps]
                   }), jsx(RenderStepElements, Object.assign({}, categoryProps))]
                 }), jsx(PageRenderPadding, {
                   children: jsxs(GoAGrid, {
@@ -9327,11 +9308,13 @@ const RenderPages = props => {
                           while (nextId < categories.length && categories[nextId].visible === false) {
                             nextId = nextId + 1;
                           }
-                          goToPage(nextId);
+                          if (!(currentStep === totalSteps && hideSummary)) {
+                            goToPage(nextId);
+                          }
                         },
                         disabled: !enabled,
                         testId: "pages-save-continue-btn",
-                        children: "Next"
+                        children: currentStep === totalSteps ? submissionLabel : "Next"
                       })
                     })]
                   })
@@ -9438,7 +9421,7 @@ const FormPageStepper = props => {
   });
 };
 const FormPagesView = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const data = props.data;
   const formStepperCtx = useContext(JsonFormsStepperContext);
   const {
@@ -9472,7 +9455,8 @@ const FormPagesView = props => {
       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,
-      isValid: completedCount === visibleCats.length
+      isValid: completedCount === visibleCats.length,
+      hideSummary: (_f = (_e = props.uischema) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.hideSummary
     };
     return jsx(TaskList, Object.assign({}, tocProps));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.33.0",
+  "version": "2.34.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/FormStepper/TaskList/TaskList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { RankedTester } from '@jsonforms/core';
 import { CategoriesState } from '../context';
 export interface TocProps {
@@ -6,6 +7,7 @@ export interface TocProps {
     title?: string;
     subtitle?: string;
     isValid: boolean;
+    hideSummary: boolean;
 }
-export declare const TaskList: ({ categories, onClick, title, subtitle, isValid }: TocProps) => JSX.Element;
+export declare const TaskList: React.FC<TocProps>;
 export declare const TableOfContentsTester: RankedTester;