@abgov/jsonforms-components 2.36.2 → 2.38.0

package/index.esm.js

@@ -12,6 +12,7 @@ import ___default, { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } fro
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
+import pluralize from 'pluralize';
 import { evaluateSync, compileSync } from '@mdx-js/mdx';
 import { Parser } from 'expr-eval';
 import Ajv from 'ajv';
@@ -7084,10 +7085,10 @@ let _$6 = t => t,
   _t16$1,
   _t17$1,
   _t18$1,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
+  _t19$1,
+  _t20$1,
+  _t21$1,
+  _t22$1,
   _t23,
   _t24,
   _t25,
@@ -7228,22 +7229,22 @@ styled.div(_t17$1 || (_t17$1 = _$6`
 const PageBorder = styled.div(_t18$1 || (_t18$1 = _$6`
   padding: var(--goa-space-m) var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t19 || (_t19 = _$6`
+const TableReviewItemSection = styled.div(_t19$1 || (_t19$1 = _$6`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t20 || (_t20 = _$6`
+const TableReviewItem = styled.div(_t20$1 || (_t20$1 = _$6`
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t21 || (_t21 = _$6`
+const TableReviewPageTitleRow = styled.div(_t21$1 || (_t21$1 = _$6`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t22 || (_t22 = _$6`
+const TableReviewCategoryLabel = styled.h3(_t22$1 || (_t22$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
@@ -9922,97 +9923,117 @@ let _$3 = t => t,
   _t15,
   _t16,
   _t17,
-  _t18;
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
-const NonEmptyCellStyle = styled.div(_t2$2 || (_t2$2 = _$3`
+const MarginTop = styled.div(_t2$2 || (_t2$2 = _$3`
+  margin-top: var(--goa-space-l);
+`));
+const NonEmptyCellStyle = styled.div(_t3$1 || (_t3$1 = _$3`
   goa-table thead th {
     background-color: #000:
   }
 `));
-const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$3`
-  margin-bottom: var(--goa-space-l);
+const ToolBarHeader = styled.div(_t4$1 || (_t4$1 = _$3`
+  margin-bottom: var(--goa-space-s);
 `));
-const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$3`
-  margin-bottom: var(--goa-space-l);
+const ObjectArrayTitle = styled.h3(_t5$1 || (_t5$1 = _$3`
+  margin-bottom: var(--goa-space-s);
 
   span {
     color: #666666;
     font-size: var(--goa-font-size-2);
   }
 `));
-const RequiredSpan = styled.span(_t5$1 || (_t5$1 = _$3`
+const RequiredSpan = styled.span(_t6$1 || (_t6$1 = _$3`
   color: #666666;
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
 `));
-const TextCenter = styled.div(_t6$1 || (_t6$1 = _$3`
+const TextCenter = styled.div(_t7 || (_t7 = _$3`
   text-align: center;
 `));
-const SideMenuItem = styled.div(_t7 || (_t7 = _$3`
+const SideMenuItem = styled.div(_t8 || (_t8 = _$3`
   &:hover {
     background: #f1f1f1;
   }
 `));
-const RowFlex = styled.div(_t8 || (_t8 = _$3`
+const RowFlex = styled.div(_t9 || (_t9 = _$3`
   display: flex;
   align-items: stretch;
 `));
-const RowFlexMenu = styled.div(_t9 || (_t9 = _$3`
+const RowFlexMenu = styled.div(_t0 || (_t0 = _$3`
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #dcdcdc;
+  border: 1px solid #dcdcdc;
+  margin-top: 1rem;
 `));
-const FlexTabs = styled.div(_t0 || (_t0 = _$3`
+const FlexTabs = styled.div(_t1 || (_t1 = _$3`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
-  margin-right: 1.5rem;
 `));
-const FlexForm = styled.div(_t1 || (_t1 = _$3`
+const FlexForm = styled.div(_t10 || (_t10 = _$3`
   flex-direction: column;
-  margin: 1.5rem 0;
   flex: 3;
 `));
-const TabName = styled.div(_t10 || (_t10 = _$3`
+const TabData = styled.div(_t11 || (_t11 = _$3`
   margin: 1rem 0 1rem 1rem;
-  font-weight: 700;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `));
-const Trash = styled.div(_t11 || (_t11 = _$3`
-  margin: 0.75rem 1.25rem 0.75rem 0.75rem;
+const Trash = styled.div(_t12 || (_t12 = _$3`
+  margin: 0.9rem 0.4rem 0.6rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t12 || (_t12 = _$3`
+const ListContainer = styled.div(_t13 || (_t13 = _$3`
+  padding: 0 0 0 0;
+`));
+const IconPadding = styled.div(_t14 || (_t14 = _$3`
+  padding: 0.9rem 0.5rem 0 0;
+`));
+const UpdateListContainer = styled.div(_t15 || (_t15 = _$3`
+  width: 100%;
+  border: 1px solid #dcdcdc;
+  padding: var(--goa-space-xl);
+`));
+styled.div(_t16 || (_t16 = _$3`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t13 || (_t13 = _$3`
+const TableTHHeader = styled.th(_t17 || (_t17 = _$3`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t14 || (_t14 = _$3`
+const ObjectArrayWarningIconDiv = styled.div(_t18 || (_t18 = _$3`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const ListWithDetailWarningIconDiv = styled.div(_t15 || (_t15 = _$3`
+const ListWithDetailWarningIconDiv = styled.div(_t19 || (_t19 = _$3`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-3);
   color: var(--goa-color-interactive-error);
 `));
-styled.label(_t16 || (_t16 = _$3`
+styled.label(_t20 || (_t20 = _$3`
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-3);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.div(_t17 || (_t17 = _$3`
+styled.div(_t21 || (_t21 = _$3`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -10020,7 +10041,7 @@ styled.div(_t17 || (_t17 = _$3`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t18 || (_t18 = _$3`
+const HilightCellWarning = styled.div(_t22 || (_t22 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
 
@@ -10072,15 +10093,18 @@ const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
 });
 
 const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
+  data,
   label,
   path,
   addItem,
   schema,
   enabled,
   rootSchema,
-  uischema
+  uischema,
+  setCurrentListPage,
+  buttonType
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const buttonPosition = ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.addButtonPosition) || 'left';
   const buttonUIProps = ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.addButtonUIProps) || {};
   const arrayLabel = getLabelText(uischema.scope, label);
@@ -10089,16 +10113,21 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
       style: {
         textAlign: buttonPosition
       },
-      children: jsx(GoAButton, Object.assign({
-        disabled: !enabled,
-        testId: `object-array-toolbar-${label}`,
-        leadingIcon: "add",
-        "aria-label": `Add to button to ${(label === null || label === void 0 ? void 0 : label.toLowerCase()) || ''}`,
-        onClick: addItem(path, createDefaultValue(schema, rootSchema)),
-        type: (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.addButtonType) !== null && _d !== void 0 ? _d : 'secondary'
-      }, buttonUIProps, {
-        children: ((_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.addButtonText) || capitalizeFirstLetter(`Add ${arrayLabel}`)
-      }))
+      children: jsx(MarginTop, {
+        children: jsx(GoAButton, Object.assign({
+          disabled: !enabled,
+          testId: `object-array-toolbar-${label}`,
+          leadingIcon: "add",
+          "aria-label": `Add to button to ${(label === null || label === void 0 ? void 0 : label.toLowerCase()) || ''}`,
+          onClick: () => {
+            addItem(path, createDefaultValue(schema, rootSchema))();
+            setCurrentListPage === null || setCurrentListPage === void 0 ? void 0 : setCurrentListPage(data + 1);
+          },
+          type: (_e = (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.addButtonType) !== null && _d !== void 0 ? _d : buttonType) !== null && _e !== void 0 ? _e : 'secondary'
+        }, buttonUIProps, {
+          children: ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.addButtonText) || `Add ${pluralize.singular(arrayLabel.charAt(0).toLowerCase() + arrayLabel.slice(1))}`
+        }))
+      })
     })
   });
 });
@@ -11029,7 +11058,7 @@ const NonEmptyRowComponent = ({
     }) : null
   }, childPath);
 };
-const LeftTab = ({
+const MainTab = ({
   childPath,
   rowIndex,
   openDeleteDialog,
@@ -11038,41 +11067,59 @@ const LeftTab = ({
   currentTab,
   name,
   current,
-  translations
+  setCurrentListPage
 }) => {
+  var _a;
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const getDataAtPath = (data, path) => path.replace(/\[(\d+)\]/g, '.$1').split('.').reduce((acc, key) => acc ? acc[key] : undefined, data);
+  const {
+    core
+  } = useJsonForms();
+  const rowData = getDataAtPath(core === null || core === void 0 ? void 0 : core.data, childPath);
+  const rowErrors = (_a = core === null || core === void 0 ? void 0 : core.errors) === null || _a === void 0 ? void 0 : _a.filter(e => {
+    const base = `/${childPath.replace(/\./g, '/')}`;
+    return e.instancePath === base || e.instancePath.startsWith(base + '/');
+  }).map(error => error === null || error === void 0 ? void 0 : error.message);
   return jsx("div", {
-    children: jsx(SideMenuItem, {
-      style: currentTab === rowIndex ? {
-        background: '#EFF8FF'
-      } : {},
-      onClick: () => selectCurrentTab(rowIndex),
-      onKeyDown: e => {
-        if (e.key === 'ArrowRight') {
-          e.preventDefault();
-          if (current) {
-            const goa = current === null || current === void 0 ? void 0 : current.querySelector('goa-input, goa-button');
-            if (goa === null || goa === void 0 ? void 0 : goa.shadowRoot) {
-              const internal = goa.shadowRoot.querySelector('input, button');
-              internal === null || internal === void 0 ? void 0 : internal.focus();
-              selectCurrentTab(rowIndex);
+    children: jsx(GoAFormItem, {
+      error: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? rowErrors : undefined,
+      children: jsx(SideMenuItem, {
+        onClick: () => selectCurrentTab(rowIndex),
+        onKeyDown: e => {
+          if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            if (current) {
+              const goa = current === null || current === void 0 ? void 0 : current.querySelector('goa-input, goa-button');
+              if (goa === null || goa === void 0 ? void 0 : goa.shadowRoot) {
+                const internal = goa.shadowRoot.querySelector('input, button');
+                internal === null || internal === void 0 ? void 0 : internal.focus();
+                selectCurrentTab(rowIndex);
+              }
             }
           }
-        }
-      },
-      children: jsxs(RowFlexMenu, {
-        tabIndex: 0,
-        children: [jsx(TabName, {
-          children: name
-        }), enabled ? jsx(Trash, {
-          role: "trash button",
-          children: jsx(GoAIconButton, {
-            disabled: !enabled,
-            icon: "trash",
-            title: 'trash button',
-            testId: "remove the details",
-            onClick: () => openDeleteDialog(childPath, rowIndex, name)
-          })
-        }) : null]
+        },
+        children: jsxs(RowFlexMenu, {
+          tabIndex: 0,
+          children: [jsxs(TabData, {
+            children: [Object.keys(rowData !== null && rowData !== void 0 ? rowData : {}).length === 0 && 'No data', " ", Object.values(rowData).join(', ')]
+          }), enabled ? jsx(Trash, {
+            children: jsx(GoAIconButton, {
+              disabled: !enabled,
+              icon: "trash",
+              title: 'remove',
+              testId: "remove the details",
+              onClick: () => openDeleteDialog(childPath, rowIndex, name)
+            })
+          }) : null, jsx(IconPadding, {
+            children: jsx(GoAIconButton, {
+              disabled: !enabled,
+              icon: "create",
+              title: 'edit',
+              testId: "edit button",
+              onClick: () => setCurrentListPage(currentTab + 1)
+            })
+          })]
+        })
       })
     })
   }, childPath);
@@ -11089,13 +11136,17 @@ const ObjectArrayList = ({
   cells,
   translations,
   currentIndex,
-  setCurrentIndex
+  setCurrentIndex,
+  setCurrentListPage,
+  currentListPage,
+  listTitle,
+  errors
 }) => {
   var _a, _b;
   const isEmptyList = data === 0;
   const rightRef = useRef(null);
   const current = rightRef.current;
-  const minHeight = 300;
+  const minHeight = 100;
   const [rightHeight, setRightHeight] = useState(minHeight);
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
@@ -11123,18 +11174,20 @@ const ObjectArrayList = ({
   const selectCurrentTab = index => {
     setCurrentIndex(index);
   };
-  const paddedHeight = rightHeight && rightHeight + 48;
-  // const detailRef = useRef<HTMLDivElement>(null);
+  (() => {
+    const str = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel) ? `${appliedUiSchemaOptions.itemLabel}` : `${path}`;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  })();
   return jsx(ListContainer, {
     children: jsxs(RowFlex, {
-      children: [jsx(FlexTabs, {
+      children: [currentListPage === 0 && jsx(FlexTabs, {
         style: {
-          height: paddedHeight
+          height: '100%'
         },
         children: range(data).map(index => {
           const childPath = Paths.compose(path, `${index}`);
-          const name = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel) ? `${appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel} ${index + 1}` : `${path} ${index + 1}`;
-          return jsx(LeftTab, {
+          const name = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel) ? `${pluralize.singular(appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.itemLabel)} ${index + 1}` : `${pluralize.singular(path)} ${index + 1}`;
+          return jsx(MainTab, {
             childPath: childPath,
             rowIndex: index,
             currentTab: currentIndex,
@@ -11143,24 +11196,35 @@ const ObjectArrayList = ({
             selectCurrentTab: selectCurrentTab,
             enabled: enabled,
             current: current,
-            translations: translations
+            setCurrentListPage: index => setCurrentListPage(index)
           }, childPath);
         })
-      }), jsx(FlexForm, {
-        ref: rightRef,
-        tabIndex: -1,
-        children: jsx(NonEmptyList, {
-          childPath: Paths.compose(path, `${currentIndex}`),
-          rowIndex: currentIndex,
-          schema: schema,
-          openDeleteDialog: openDeleteDialog,
-          showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
-          enabled: enabled,
-          cells: cells,
-          path: path,
-          uischema: uischema,
-          translations: translations
-        }, Paths.compose(path, `${currentIndex}`))
+      }), currentListPage > 0 && jsxs(UpdateListContainer, {
+        children: [jsxs(FlexForm, {
+          ref: rightRef,
+          tabIndex: -1,
+          children: [jsx(ObjectArrayTitle, {
+            children: pluralize.singular(listTitle || '')
+          }), jsx(NonEmptyList, {
+            childPath: Paths.compose(path, `${currentIndex}`),
+            rowIndex: currentIndex,
+            schema: schema,
+            openDeleteDialog: openDeleteDialog,
+            showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons,
+            enabled: enabled,
+            cells: cells,
+            path: path,
+            uischema: uischema,
+            translations: translations
+          }, Paths.compose(path, `${currentIndex}`))]
+        }), jsx(GoAButton, {
+          type: 'primary',
+          onClick: () => {
+            setCurrentListPage(0);
+          },
+          testId: "next-list-button",
+          children: "Continue"
+        })]
       })]
     })
   });
@@ -11170,7 +11234,8 @@ class ListWithDetailControl extends React.Component {
   constructor() {
     super(...arguments);
     this.state = {
-      maxItemsError: ''
+      maxItemsError: '',
+      currentListPage: 0
     };
     // eslint-disable-next-line
     this.addItem = (path, value) => {
@@ -11228,17 +11293,20 @@ class ListWithDetailControl extends React.Component {
       visible: visible,
       "data-testid": "jsonforms-object-list-wrapper",
       children: [jsxs(ToolBarHeader, {
-        children: [listTitle && jsxs(ObjectArrayTitle, {
-          children: [listTitle, " ", jsx("span", {
-            children: additionalProps.required && '(required)'
-          }), this.state.maxItemsError && jsx("span", {
-            style: {
-              color: 'red',
-              marginLeft: '1rem'
-            },
-            children: this.state.maxItemsError
-          })]
-        }), jsx(ObjectArrayToolBar, {
+        children: [listTitle && this.state.currentListPage === 0 && jsx(MarginTop, {
+          children: jsxs(ObjectArrayTitle, {
+            children: [listTitle, " ", jsx("span", {
+              children: additionalProps.required && '(required)'
+            }), this.state.maxItemsError && jsx("span", {
+              style: {
+                color: 'red',
+                marginLeft: '1rem'
+              },
+              children: this.state.maxItemsError
+            })]
+          })
+        }), this.state.currentListPage === 0 && data === 0 && jsx(ObjectArrayToolBar, {
+          data: data,
           errors: errors,
           label: label,
           addItem: (path, value) => () => {
@@ -11249,7 +11317,14 @@ class ListWithDetailControl extends React.Component {
           uischema: controlElement,
           schema: schema,
           rootSchema: rootSchema,
-          enabled: enabled
+          enabled: enabled,
+          setCurrentListPage: listPage => {
+            this.setState({
+              currentListPage: listPage
+            });
+          },
+          currentListPage: this.state.currentListPage,
+          buttonType: "secondary"
         })]
       }), jsx("div", {
         children: jsx(ObjectArrayList, Object.assign({
@@ -11263,8 +11338,36 @@ class ListWithDetailControl extends React.Component {
           cells: cells,
           config: config,
           currentIndex: this.props.currentTab,
-          setCurrentIndex: this.props.setCurrentTab
+          setCurrentIndex: this.props.setCurrentTab,
+          setCurrentListPage: listPage => {
+            this.setState({
+              currentListPage: listPage
+            });
+          },
+          errors: errors,
+          currentListPage: this.state.currentListPage,
+          listTitle: listTitle
         }, additionalProps))
+      }), this.state.currentListPage === 0 && data > 0 && jsx(ObjectArrayToolBar, {
+        data: data,
+        errors: errors,
+        label: label,
+        addItem: (path, value) => () => {
+          this.addItem(path, value);
+        },
+        numColumns: 0,
+        path: path,
+        uischema: controlElement,
+        schema: schema,
+        rootSchema: rootSchema,
+        enabled: enabled,
+        setCurrentListPage: listPage => {
+          this.setState({
+            currentListPage: listPage
+          });
+        },
+        currentListPage: this.state.currentListPage,
+        buttonType: "tertiary"
       })]
     });
   }
@@ -13022,71 +13125,191 @@ function resolveScope(scope, data) {
   const cleaned = scope.replace(/^#\/(properties\/)?/, '');
   const parts = cleaned.split('/').filter(Boolean);
   let cur = data;
-  for (const p of parts) {
-    if (cur == null || typeof cur !== 'object') return undefined;
-    cur = cur[p];
+  for (const part of parts) {
+    if (cur == null) return undefined;
+    if (Array.isArray(cur) && /^\d+$/.test(part)) {
+      cur = cur[Number(part)];
+    } else if (typeof cur === 'object') {
+      if (part === 'properties') continue;
+      cur = cur[part];
+    } else {
+      return undefined;
+    }
   }
   return cur;
 }
-function sumColumn(scope, data) {
-  if (!scope || typeof scope !== 'string') return undefined;
-  // normalize scope: remove leading "#/" and optional "properties/"
+function evaluateSum(scope, data) {
+  if (!scope || typeof scope !== 'string') {
+    return {
+      value: undefined,
+      error: 'SUM() requires a JSON pointer argument.'
+    };
+  }
   const cleaned = scope.replace(/^#\/(properties\/)?/, '');
   const parts = cleaned.split('/').filter(Boolean);
-  if (parts.length < 2) return undefined;
-  const colKey = parts[parts.length - 1];
+  if (parts.length < 2) {
+    return {
+      value: undefined,
+      error: `SUM() pointer "${scope}" must include an array and field name.`
+    };
+  }
+  const fieldKey = parts[parts.length - 1];
   const arrPath = parts.slice(0, -1);
   let cur = data;
-  for (const p of arrPath) {
-    if (cur == null) return undefined;
-    // handle numeric indices for arrays
-    if (Array.isArray(cur) && /^\d+$/.test(p)) {
-      cur = cur[Number(p)];
+  for (const segment of arrPath) {
+    if (cur == null) {
+      cur = undefined;
+      break;
+    }
+    if (Array.isArray(cur) && /^\d+$/.test(segment)) {
+      cur = cur[Number(segment)];
+    } else if (typeof cur === 'object') {
+      if (segment === 'properties') continue;
+      cur = cur[segment];
     } else {
-      cur = cur[p];
+      cur = undefined;
+      break;
     }
   }
-  if (!Array.isArray(cur)) return undefined;
+  if (cur == null) {
+    return {
+      value: undefined,
+      error: `Please provide values for: ${scope}`
+    };
+  }
+  if (!Array.isArray(cur)) {
+    return {
+      value: undefined,
+      error: `SUM() pointer "${scope}" does not resolve to an array.`
+    };
+  }
+  const missingIndices = [];
+  const invalidIndices = [];
   let sum = 0;
-  for (const row of cur) {
-    if (row == null) return undefined;
-    const v = row[colKey];
-    if (typeof v !== 'number') return undefined;
-    sum += v;
+  for (let i = 0; i < cur.length; i++) {
+    const row = cur[i];
+    if (row == null || typeof row !== 'object') {
+      missingIndices.push(i);
+      continue;
+    }
+    const v = row[fieldKey];
+    if (v === undefined || v === null || v === '') {
+      missingIndices.push(i);
+    } else if (typeof v !== 'number' || Number.isNaN(v)) {
+      invalidIndices.push(i);
+    } else {
+      sum += v;
+    }
   }
-  return sum;
+  if (invalidIndices.length > 0) {
+    return {
+      value: undefined,
+      error: `Expected numeric values for: ${scope} at rows [${invalidIndices.join(', ')}]`
+    };
+  }
+  if (missingIndices.length === cur.length) {
+    return {
+      value: undefined,
+      error: `Please provide values for: ${scope}`
+    };
+  }
+  return {
+    value: sum,
+    error: missingIndices.length ? `Some rows are missing values for: ${scope}` : undefined
+  };
 }
+/**
+ * General expression evaluation.
+ * - Supports SUM(#/properties/arr/c3)
+ * - Supports arithmetic with JSON pointers:
+ *   "#/properties/x * #/properties/y + #/properties/z"
+ *
+ * Returns { value, error } and NEVER throws.
+ */
 function evaluateExpression(expression, data) {
-  if (!expression || typeof expression !== 'string') return undefined;
+  if (!expression || typeof expression !== 'string') {
+    return {
+      value: undefined,
+      error: undefined
+    };
+  }
   const trimmed = expression.trim();
+  if (!trimmed) return {
+    value: undefined,
+    error: undefined
+  };
   const sumMatch = trimmed.match(/^SUM\(\s*['"]?(.+?)['"]?\s*\)$/i);
   if (sumMatch) {
-    return sumColumn(sumMatch[1], data);
+    const pointer = sumMatch[1];
+    return evaluateSum(pointer, data);
   }
-  // Find unique scope tokens like #/properties/x or #/arr/0/c3
   const scopeRegex = /#\/(?:properties\/)?[^\s"')]+/g;
   const matches = trimmed.match(scopeRegex) || [];
   const uniqueScopes = Array.from(new Set(matches));
-  // Prepare variable mapping for expr-eval
+  let exprForParse = trimmed;
+  const scopeToVar = new Map();
+  uniqueScopes.forEach((scope, index) => {
+    const varName = `v${index}`;
+    scopeToVar.set(scope, varName);
+    const pattern = new RegExp(`['"]?${escapeRegExp(scope)}['"]?`, 'g');
+    exprForParse = exprForParse.replace(pattern, varName);
+  });
+  let parsed;
+  try {
+    const parser = new Parser();
+    parsed = parser.parse(exprForParse);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (e) {
+    return {
+      value: undefined,
+      error: 'Invalid expression syntax'
+    };
+  }
   const vars = {};
-  let expr = trimmed;
-  for (let i = 0; i < uniqueScopes.length; i++) {
-    const scope = uniqueScopes[i];
+  const missingScopes = [];
+  const invalidTypeScopes = [];
+  for (const scope of uniqueScopes) {
     const val = resolveScope(scope, data);
-    if (val === undefined || typeof val !== 'number') return undefined;
-    const varName = `v${i}`;
+    if (val === undefined || val === null || val === '') {
+      missingScopes.push(scope);
+      continue;
+    }
+    if (typeof val !== 'number' || Number.isNaN(val)) {
+      invalidTypeScopes.push(scope);
+      continue;
+    }
+    const varName = scopeToVar.get(scope);
     vars[varName] = val;
-    const pattern = new RegExp(`['"]?${escapeRegExp(scope)}['"]?`, 'g');
-    expr = expr.replace(pattern, varName);
   }
-  // Evaluate with expr-eval parser
+  if (invalidTypeScopes.length > 0) {
+    return {
+      value: undefined,
+      error: `Expected numeric values for: ${invalidTypeScopes.join(', ')}`
+    };
+  }
+  if (missingScopes.length > 0) {
+    return {
+      value: undefined,
+      error: `Please provide values for: ${missingScopes.join(', ')}`
+    };
+  }
   try {
-    const parser = new Parser();
-    const parsed = parser.parse(expr);
     const result = parsed.evaluate(vars);
-    return typeof result === 'number' && Number.isFinite(result) ? result : undefined;
+    if (typeof result === 'number' && Number.isFinite(result)) {
+      return {
+        value: result,
+        error: undefined
+      };
+    }
+    return {
+      value: undefined,
+      error: 'Expression did not produce a numeric result'
+    };
   } catch (_a) {
-    return undefined;
+    return {
+      value: undefined,
+      error: 'Error while evaluating expression'
+    };
   }
 }
 
@@ -13094,29 +13317,44 @@ const GoACalculation = props => {
   var _a;
   const {
     uischema,
-    data,
     schema,
     path,
     id,
     visible,
     handleChange
   } = props;
-  const expression = schema === null || schema === void 0 ? void 0 : schema.description;
   const label = typeof (uischema === null || uischema === void 0 ? void 0 : uischema.label) === 'string' ? uischema.label : undefined;
+  const expression = schema === null || schema === void 0 ? void 0 : schema.description;
   const {
     core
   } = useJsonForms();
   const rootData = (_a = core === null || core === void 0 ? void 0 : core.data) !== null && _a !== void 0 ? _a : {};
-  const computedValue = expression ? evaluateExpression(expression, rootData) : undefined;
-  React.useEffect(() => {
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const prevDataRef = useRef(rootData);
+  useEffect(() => {
+    setHasInteracted(was => was ? true : true);
+  }, [rootData]);
+  useEffect(() => {
+    if (prevDataRef.current !== rootData) {
+      setHasInteracted(true);
+      prevDataRef.current = rootData;
+    }
+  }, [rootData]);
+  const {
+    value: computedValue,
+    error
+  } = evaluateExpression(expression, rootData);
+  useEffect(() => {
     if (computedValue !== undefined && typeof handleChange === 'function' && path) {
       handleChange(path, computedValue);
     }
   }, [computedValue, handleChange, path]);
+  const showError = hasInteracted && !!error;
   return jsx(Visible, {
     visible: visible,
     children: jsx(GoAFormItem, {
       label: label,
+      error: showError ? error : '',
       children: jsx(GoAInput, {
         name: `computed-input-${id}`,
         testId: `computed-input-${id}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.36.2",
+  "version": "2.38.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",
@@ -13,7 +13,8 @@
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",
-    "expr-eval": "^2.0.2"
+    "expr-eval": "^2.0.2",
+    "pluralize": "^8.0.0"
   },
   "dependencies": {
     "axios": "^1.6.7",

package/src/lib/Controls/Calculation/CalculationEngine.d.ts

@@ -1,3 +1,15 @@
+export interface EvaluationResult {
+    value?: number;
+    error?: string;
+}
 export declare function resolveScope(scope: string, data: unknown): unknown;
-export declare function sumColumn(scope: string, data: unknown): number | undefined;
-export declare function evaluateExpression(expression: string, data: unknown): number | undefined;
+export declare function evaluateSum(scope: string | undefined, data: unknown): EvaluationResult;
+/**
+ * General expression evaluation.
+ * - Supports SUM(#/properties/arr/c3)
+ * - Supports arithmetic with JSON pointers:
+ *   "#/properties/x * #/properties/y + #/properties/z"
+ *
+ * Returns { value, error } and NEVER throws.
+ */
+export declare function evaluateExpression(expression: string | undefined, data: unknown): EvaluationResult;

package/src/lib/Controls/ObjectArray/ListWithDetailControl.d.ts

@@ -31,6 +31,7 @@ interface NonEmptyRowProps {
     path: string;
     translations: ArrayTranslations;
     uischema: ControlElement;
+    listTitle?: string;
 }
 export declare const NonEmptyList: React.MemoExoticComponent<({ childPath, schema, enabled, cells, uischema, }: NonEmptyRowProps & WithDeleteDialogSupport) => import("react/jsx-runtime").JSX.Element>;
 interface ListWithDetailControlProps extends ObjectArrayControlProps {
@@ -40,6 +41,7 @@ interface ListWithDetailControlProps extends ObjectArrayControlProps {
 export declare class ListWithDetailControl extends React.Component<ListWithDetailControlProps, any> {
     state: {
         maxItemsError: string;
+        currentListPage: number;
     };
     addItem: (path: string, value: any) => void;
     render(): import("react/jsx-runtime").JSX.Element;

package/src/lib/Controls/ObjectArray/ObjectArrayToolBar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ControlElement, JsonSchema } from '@jsonforms/core';
 export interface ObjectArrayToolbarProps {
+    data?: any;
     numColumns: number;
     errors: string;
     label: string;
@@ -10,6 +11,9 @@ export interface ObjectArrayToolbarProps {
     rootSchema: JsonSchema;
     enabled: boolean;
     addItem(path: string, value: any): () => void;
+    setCurrentListPage?: (page: number) => void;
+    currentListPage?: number;
+    buttonType?: string;
 }
 declare const ObjectArrayToolBar: React.NamedExoticComponent<ObjectArrayToolbarProps>;
 export default ObjectArrayToolBar;

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

@@ -1,4 +1,5 @@
 export declare const DeleteDialogContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MarginTop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const NonEmptyCellStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ToolBarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ObjectArrayTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
@@ -9,9 +10,12 @@ export declare const RowFlex: import("styled-components/dist/types").IStyledComp
 export declare const RowFlexMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TabName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabData: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Trash: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UpdateListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CompleteContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableTHHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
 export declare const ObjectArrayWarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListWithDetailWarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;