@abgov/jsonforms-components 2.67.7 → 2.67.9

package/index.esm.js

@@ -1,18 +1,18 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { useContext, useReducer, useMemo, useEffect, createContext, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { GoabFormItem, GoabDropdown, GoabDropdownItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabTable, GoabModal, GoabButtonGroup, GoabContainer, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
+import { GoabFormItem, GoabDropdown, GoabDropdownItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabTable, GoabGrid, GoabIconButton, GoabModal, GoabButtonGroup, GoabContainer, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
 import Ajv from 'ajv';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, or, isOneOfEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, toDataPath, schemaTypeIs, formatIs, getAjv, schemaMatches, isObjectArrayControl, isPrimitiveArrayControl, composePaths, hasType, isCategorization, isLayout, INIT, UPDATE_CORE } from '@jsonforms/core';
 import * as _$c from 'lodash';
-import ___default, { isObject as isObject$i, isEmpty as isEmpty$1 } from 'lodash';
+import ___default, { isEmpty, isObject as isObject$i } from 'lodash';
 import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsArrayLayoutProps, withJsonFormsLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import dompurify from 'dompurify';
 import * as xss from 'xss';
 import merge from 'lodash/merge';
-import isEmpty from 'lodash/isEmpty';
+import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
 import pluralize from 'pluralize';
 import { compileSync } from '@mdx-js/mdx';
@@ -4312,7 +4312,7 @@ styled.div(_t$c || (_t$c = _$b`
 const Visible = styled.div(_t2$6 || (_t2$6 = _$b`
   display: ${0};
   width: 100%;
-`), p => p.visible ? 'block' : 'none');
+`), p => p.$visible !== false ? 'block' : 'none');
 
 var uncurryThis$i = functionUncurryThis;
 
@@ -7129,7 +7129,7 @@ const GoAInputBaseControl = props => {
   return jsx(JsonFormRegisterProvider, {
     defaultRegisters: undefined,
     children: jsx(Visible, {
-      visible: visible,
+      "$visible": visible,
       children: jsx(FormFieldWrapper$1, {
         ref: controlRef,
         className: "jsonforms-elements-wrapper",
@@ -7270,6 +7270,16 @@ const ADDRESS_LOOKUP_LABELS = {
   subdivisionCode: 'Province',
   country: 'Country'
 };
+const VALIDATION_KEYWORDS = {
+  REQUIRED: 'required',
+  MIN_LENGTH: 'minLength',
+  MAX_LENGTH: 'maxLength',
+  FORMAT: 'format',
+  MINIMUM: 'minimum',
+  MAXIMUM: 'maximum',
+  TYPE: 'type',
+  ERROR_MESSAGE: 'errorMessage'
+};
 const getAddressLookupFieldLabel = fieldName => {
   return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
 };
@@ -8169,7 +8179,7 @@ const GoACalloutController = props => {
   }
   const calloutProps = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.componentProps) || {};
   return jsx(Visible, {
-    visible: showCallout,
+    "$visible": showCallout,
     children: callout(calloutProps)
   });
 };
@@ -9109,6 +9119,195 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
   });
 });
 
+const jsonPreviewStyle = {
+  display: 'block',
+  width: '100%',
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  whiteSpace: 'pre-wrap',
+  textAlign: 'left',
+  overflowX: 'auto'
+};
+function prettify(prop) {
+  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase()).trim();
+}
+/**
+ * Extract Json data schema name attribute and the ui schema label name.
+ * @param obj
+ * @param names
+ * @returns A key value of the data attribute name and the uiSchema label value
+ */
+const extractNames = (obj, names = {}) => {
+  if (Array.isArray(obj)) {
+    obj.forEach(item => extractNames(item, names));
+  } else if (typeof obj === 'object' && obj !== null) {
+    const typedObj = obj;
+    if (typeof typedObj.scope === 'string') {
+      const parts = typedObj.scope.split('/');
+      const key = parts[parts.length - 1];
+      if (typeof typedObj.label === 'string' && typedObj.label.trim()) {
+        names[key] = typedObj.label;
+      } else if (typeof typedObj.label === 'object' && typedObj.label !== null && 'text' in typedObj.label && typeof typedObj.label.text === 'string' && typedObj.label.text.trim()) {
+        names[key] = typedObj.label.text;
+      } else {
+        names[key] = prettify(key);
+      }
+    }
+    Object.values(typedObj).forEach(value => extractNames(value, names));
+  }
+  return names;
+};
+function getHeaderLabel(headName, itemsSchema, columnLabels) {
+  if (columnLabels != null && columnLabels[headName]) {
+    return columnLabels[headName];
+  }
+  const fieldSchema = itemsSchema == null ? void 0 : itemsSchema[headName];
+  if (fieldSchema && typeof fieldSchema.title === 'string' && fieldSchema.title.trim()) {
+    return fieldSchema.title;
+  }
+  return prettify(headName);
+}
+const DataTable = ({
+  itemsSchema,
+  data,
+  columnLabels
+}) => {
+  var _Object$keys;
+  return jsxs(GoabTable, {
+    width: "100%",
+    children: [jsx("thead", {
+      children: jsx("tr", {
+        children: itemsSchema && ((_Object$keys = Object.keys(itemsSchema)) == null ? void 0 : _Object$keys.map((headNames, ix) => {
+          return jsx("th", {
+            children: getHeaderLabel(headNames, itemsSchema, columnLabels)
+          }, ix);
+        }))
+      })
+    }), jsx("tbody", {
+      children: data.map((obj, index) => jsx("tr", {
+        children: itemsSchema && Object.keys(itemsSchema).map((headNames, ix) => {
+          return jsx("td", {
+            children: obj[headNames]
+          }, ix);
+        })
+      }, index))
+    })]
+  });
+};
+const isObjectArrayEmpty = currentData => {
+  const result = isEmpty(currentData) || JSON.stringify(currentData) === '[{}]';
+  return result;
+};
+const renderNoneGivenText = data => {
+  return !data ? jsxs(Fragment, {
+    children: [jsx(NoneGivenTableText, {
+      children: "(none given)"
+    }), jsx("br", {})]
+  }) : data;
+};
+const renderCellColumn = ({
+  data,
+  error,
+  errors,
+  index,
+  rowPath,
+  element,
+  isRequired
+}) => {
+  const renderWarningCell = error => {
+    return jsxs(HilightCellWarning, {
+      children: [renderNoneGivenText(data), error && jsxs(ObjectArrayWarningIconDiv, {
+        children: [jsx(GoabIcon, {
+          type: "warning",
+          title: "warning",
+          size: "small",
+          theme: "filled",
+          mt: "2xs"
+        }), error ? error : '']
+      })]
+    });
+  };
+  if (data === undefined && isRequired || error !== '' && error !== undefined) {
+    const message = error || (isRequired && data === undefined ? 'Required' : data);
+    return renderWarningCell(message);
+  } else if (data === undefined && !isRequired) {
+    return renderWarningCell('');
+  } else if (data !== undefined && isRequired && error) {
+    return renderWarningCell(error);
+  }
+  const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
+  const nestedErrors = errors == null ? void 0 : errors.filter(e => e.instancePath.includes(path));
+  /* istanbul ignore next */
+  if (typeof data === 'boolean') {
+    return data ? 'Yes' : 'No';
+  } else if (typeof data === 'number') {
+    return String(data);
+  } else if (typeof data === 'string') {
+    return data;
+  } else if (typeof data === 'object' || Array.isArray(data)) {
+    const result = Object.keys(data);
+    if (!isRequired && nestedErrors.length === 0) {
+      if ('year' in data && 'month' in data && ('day' in data || 'date' in data)) {
+        const dateObj = data;
+        const dayValue = 'day' in dateObj ? dateObj.day : dateObj.date;
+        return `${dateObj.year}-${dateObj.month}-${dayValue}`;
+      }
+      return jsx("pre", {
+        style: jsonPreviewStyle,
+        children: JSON.stringify(data, null, 2)
+      });
+    } else if (result.length === 0) {
+      return renderWarningCell();
+    } else if (result.length > 0 && (isObjectArrayEmpty(data) || nestedErrors.length > 0)) {
+      return jsx("pre", {
+        style: jsonPreviewStyle,
+        children: renderWarningCell(JSON.stringify(data, null, 2))
+      });
+    } else if (data !== undefined && result.length > 0 && error !== '' && error !== undefined) {
+      const values = Object.values(data);
+      if (values && values.length > 0) {
+        return jsx("pre", {
+          style: jsonPreviewStyle,
+          children: renderWarningCell(JSON.stringify(values.at(0), null, 2))
+        });
+      }
+    } else {
+      const firstRow = Array.isArray(data) ? data[0] : undefined;
+      const columnLabels = extractNames(firstRow);
+      return jsx(DataTable, {
+        itemsSchema: data[0],
+        data: data,
+        columnLabels: columnLabels
+      });
+    }
+  }
+  return null;
+};
+const createHumanizeError = (error, schema, uischema) => {
+  let humanMessage;
+  if (error) {
+    try {
+      humanMessage = humanizeAjvError(error, schema, uischema);
+      if (typeof humanMessage === 'string' && (humanMessage.includes('must have required property') || humanMessage.includes(REQUIRED_PROPERTY_ERROR))) {
+        const propertyMatch = humanMessage.match(/'([^']+)'/);
+        if (propertyMatch && propertyMatch[1]) {
+          humanMessage = prettify(propertyMatch[1]) + ' is required';
+        }
+      }
+    } catch (err) {
+      const raw = error.message;
+      const propertyMatch = raw == null ? void 0 : raw.match(/'([^']+)'/);
+      if (propertyMatch && propertyMatch[1]) {
+        humanMessage = prettify(propertyMatch[1]) + ' is required';
+      } else {
+        humanMessage = raw;
+      }
+    }
+  }
+  return humanMessage;
+};
+
 const _excluded$5 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "openDeleteDialog", "visible", "enabled", "cells", "data", "config"];
 const getItemsTitle = schema => {
   const items = schema == null ? void 0 : schema.items;
@@ -9244,12 +9443,10 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
   var _uischema$elements3, _uischema$options0, _uiSchemaElementsForN;
   const {
     schema,
-    errors,
     enabled,
     renderers,
     cells,
     rowPath,
-    isValid,
     uischema
   } = props;
   const propNames = getValidColumnProps$1(schema);
@@ -9328,7 +9525,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
 const NonEmptyCell$1 = ownProps => {
   const ctx = useJsonForms();
   const emptyCellProps = ctxToNonEmptyCellProps$1(ctx, ownProps);
-  const isValid = isEmpty(emptyCellProps.errors);
+  const isValid = isEmpty$1(emptyCellProps.errors);
   return jsx(NonEmptyCellComponent$1, Object.assign({}, emptyCellProps, {
     isValid: isValid
   }));
@@ -9377,12 +9574,9 @@ function getValue(obj, path) {
     return undefined;
   }, obj);
 }
-function prettify$1(prop) {
-  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
-}
 function findLabelForPath(path, uiSchema, schema) {
   const propertyKey = path.split('.').pop() || path;
-  const fallbackLabel = prettify$1(propertyKey);
+  const fallbackLabel = prettify(propertyKey);
   if (!uiSchema) {
     return fallbackLabel;
   }
@@ -9573,7 +9767,7 @@ function resolveLabel(instancePath, schema, uischema) {
   if (resolvedSchema != null && resolvedSchema.title) {
     return resolvedSchema.title;
   }
-  return prettify$1(prop || 'Unknown field');
+  return prettify(prop || 'Unknown field');
 }
 function ajvPathToSchemaPath(instancePath) {
   const parts = instancePath.split('/').filter(Boolean);
@@ -9604,15 +9798,6 @@ function findControlLabel(uischema, scope) {
   }
   return;
 }
-const VALIDATION_KEYWORDS = {
-  REQUIRED: 'required',
-  MIN_LENGTH: 'minLength',
-  MAX_LENGTH: 'maxLength',
-  FORMAT: 'format',
-  MINIMUM: 'minimum',
-  MAXIMUM: 'maximum',
-  TYPE: 'type'
-};
 function humanizeAjvError(error, schema, uischema) {
   var _error$message;
   const path = getEffectiveInstancePath(error);
@@ -9729,9 +9914,9 @@ const MainTab = ({
   const rowData = getDataAtPath(core == null ? void 0 : core.data, childPath);
   function resolveField(e) {
     var _e$params;
-    if (e.keyword === 'required') {
+    if (e.keyword === VALIDATION_KEYWORDS.REQUIRED) {
       return e.params.missingProperty;
-    } else if (e.keyword === 'errorMessage' && (_e$params = e.params) != null && _e$params.errors[0].params.missingProperty) {
+    } else if (e.keyword === VALIDATION_KEYWORDS.ERROR_MESSAGE && (_e$params = e.params) != null && _e$params.errors[0].params.missingProperty) {
       return e.params.errors[0].params.missingProperty;
     }
     const path = e.instancePath.split('/');
@@ -9741,22 +9926,22 @@ const MainTab = ({
   const fieldErrors = core == null || (_core$errors = core.errors) == null ? void 0 : _core$errors.filter(e => e.instancePath === rowBase || e.instancePath.startsWith(rowBase + '/')).reduce((acc, e) => {
     var _e$params2;
     const field = resolveField(e);
-    if (e.keyword === 'errorMessage' && (_e$params2 = e.params) != null && _e$params2.errors) {
+    if (e.keyword === VALIDATION_KEYWORDS.ERROR_MESSAGE && (_e$params2 = e.params) != null && _e$params2.errors) {
       const nestedErrors = e.params.errors;
       if (field) {
         try {
-          acc.fields[field] = nestedErrors.map(ne => humanizeAjvError(ne, core.schema, core.uischema)).join(', ');
+          acc.fields[field] = e.message ? e.message : nestedErrors.map(ne => humanizeAjvError(ne, core.schema, core.uischema)).join(', ');
         } catch (err) {
           var _nestedErrors$;
           // Fallback: if nestedErrors contain a missingProperty, use it
           const missingFromNested = nestedErrors == null || (_nestedErrors$ = nestedErrors[0]) == null || (_nestedErrors$ = _nestedErrors$.params) == null ? void 0 : _nestedErrors$.missingProperty;
           if (missingFromNested) {
-            acc.fields[field] = prettify$1(missingFromNested) + ' is required';
+            acc.fields[field] = prettify(missingFromNested) + ' is required';
           } else {
             const raw = e.message;
             if (raw && (raw.includes('must have required property') || raw.includes(REQUIRED_PROPERTY_ERROR))) {
               const m = raw.match(/'([^']+)'/);
-              if (m && m[1]) acc.fields[field] = prettify$1(m[1]) + ' is required';else acc.fields[field] = raw;
+              if (m && m[1]) acc.fields[field] = prettify(m[1]) + ' is required';else acc.fields[field] = raw;
             } else {
               acc.fields[field] = raw || 'Unknown error';
             }
@@ -9769,12 +9954,12 @@ const MainTab = ({
           var _nestedErrors$2;
           const missingFromNested = nestedErrors == null || (_nestedErrors$2 = nestedErrors[0]) == null || (_nestedErrors$2 = _nestedErrors$2.params) == null ? void 0 : _nestedErrors$2.missingProperty;
           if (missingFromNested) {
-            acc.row = prettify$1(missingFromNested) + ' is required';
+            acc.row = prettify(missingFromNested) + ' is required';
           } else {
             const raw = e == null ? void 0 : e.message;
             if (raw && (raw.includes('must have required property') || raw.includes(REQUIRED_PROPERTY_ERROR))) {
               const m = raw.match(/'([^']+)'/);
-              if (m && m[1]) acc.row = prettify$1(m[1]) + ' is required';else acc.row = raw;
+              if (m && m[1]) acc.row = prettify(m[1]) + ' is required';else acc.row = raw;
             } else {
               acc.row = raw || 'Unknown error';
             }
@@ -9788,7 +9973,7 @@ const MainTab = ({
       if (typeof msg === 'string' && (msg.includes('must have required property') || msg.includes(REQUIRED_PROPERTY_ERROR))) {
         const propertyMatch = msg.match(/'([^']+)'/);
         if (propertyMatch && propertyMatch[1]) {
-          msg = prettify$1(propertyMatch[1]) + ' is required';
+          msg = prettify(propertyMatch[1]) + ' is required';
         }
       }
       acc.fields[field] = msg;
@@ -10031,7 +10216,7 @@ class ListWithDetailControl extends React.Component {
     this.state.currentListPage === 0 && data === 0;
     const editMode = this.state.currentListPage !== 0 && !withLeftTab;
     return jsxs(Visible, {
-      visible: visible,
+      "$visible": visible,
       "data-testid": "jsonforms-object-list-wrapper",
       children: [jsxs(ToolBarHeader, {
         children: [listTitle && jsx(MarginTop, {
@@ -10528,7 +10713,7 @@ const GoAEmailInput = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schema.default, data]);
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx(JsonFormRegisterProvider, {
       defaultRegisters: undefined,
       children: jsx(FormFieldWrapper$1, {
@@ -10604,12 +10789,12 @@ const LayoutRenderer = ({
   visible,
   width
 }) => {
-  if (isEmpty(elements)) {
+  if (isEmpty$1(elements)) {
     return null;
   } else {
     if (direction === 'row') {
       return jsx(Visible, {
-        visible: visible,
+        "$visible": visible,
         children: jsx(GoabGrid, {
           minChildWidth: width || '10ch',
           children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
@@ -10617,7 +10802,7 @@ const LayoutRenderer = ({
       });
     } else {
       return jsx(Visible, {
-        visible: visible,
+        "$visible": visible,
         children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
       });
     }
@@ -10634,19 +10819,19 @@ const ReviewLayoutRenderer = ({
   visible,
   width
 }) => {
-  if (isEmpty(elements)) {
+  if (isEmpty$1(elements)) {
     return null;
   } else {
     if (direction === 'row') {
       return jsx(Visible, {
-        visible: visible,
+        "$visible": visible,
         children: jsx(ReviewGrid, {
           children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
         })
       });
     } else {
       return jsx(Visible, {
-        visible: visible,
+        "$visible": visible,
         children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
       });
     }
@@ -11035,7 +11220,7 @@ const RenderStepElements = props => {
   var _props$category;
   const memoizedSchema = useMemo(() => Object.assign({}, props.schema), [props.schema]);
   return jsx(Visible, {
-    visible: props.visible,
+    "$visible": props.visible,
     "data-testid": `${(props == null ? void 0 : props.path) || ((_props$category = props.category) == null ? void 0 : _props$category.label)}-categories-${props.categoryIndex}`,
     children: props.category.elements.map((uiSchema, index) => {
       var _props$category2;
@@ -11238,7 +11423,7 @@ const PhoneNumberWithTypeControl = props => {
     handleChange(path, updated);
   };
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsxs(PhoneGrid, {
       children: [jsx(GoabFormItem, {
         label: "Phone type",
@@ -11296,7 +11481,7 @@ const PhoneNumberControl = props => {
     handleChange(path, value);
   };
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx(GoabFormItem, {
       label: (schema == null ? void 0 : schema.title) || 'Phone number',
       requirement: required ? 'required' : undefined,
@@ -11941,195 +12126,6 @@ const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
   }, 1);
 });
 
-const jsonPreviewStyle = {
-  display: 'block',
-  width: '100%',
-  boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
-  whiteSpace: 'pre-wrap',
-  textAlign: 'left',
-  overflowX: 'auto'
-};
-function prettify(prop) {
-  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase()).trim();
-}
-/**
- * Extract Json data schema name attribute and the ui schema label name.
- * @param obj
- * @param names
- * @returns A key value of the data attribute name and the uiSchema label value
- */
-const extractNames = (obj, names = {}) => {
-  if (Array.isArray(obj)) {
-    obj.forEach(item => extractNames(item, names));
-  } else if (typeof obj === 'object' && obj !== null) {
-    const typedObj = obj;
-    if (typeof typedObj.scope === 'string') {
-      const parts = typedObj.scope.split('/');
-      const key = parts[parts.length - 1];
-      if (typeof typedObj.label === 'string' && typedObj.label.trim()) {
-        names[key] = typedObj.label;
-      } else if (typeof typedObj.label === 'object' && typedObj.label !== null && 'text' in typedObj.label && typeof typedObj.label.text === 'string' && typedObj.label.text.trim()) {
-        names[key] = typedObj.label.text;
-      } else {
-        names[key] = prettify(key);
-      }
-    }
-    Object.values(typedObj).forEach(value => extractNames(value, names));
-  }
-  return names;
-};
-function getHeaderLabel(headName, itemsSchema, columnLabels) {
-  if (columnLabels != null && columnLabels[headName]) {
-    return columnLabels[headName];
-  }
-  const fieldSchema = itemsSchema == null ? void 0 : itemsSchema[headName];
-  if (fieldSchema && typeof fieldSchema.title === 'string' && fieldSchema.title.trim()) {
-    return fieldSchema.title;
-  }
-  return prettify(headName);
-}
-const DataTable = ({
-  itemsSchema,
-  data,
-  columnLabels
-}) => {
-  var _Object$keys;
-  return jsxs(GoabTable, {
-    width: "100%",
-    children: [jsx("thead", {
-      children: jsx("tr", {
-        children: itemsSchema && ((_Object$keys = Object.keys(itemsSchema)) == null ? void 0 : _Object$keys.map((headNames, ix) => {
-          return jsx("th", {
-            children: getHeaderLabel(headNames, itemsSchema, columnLabels)
-          }, ix);
-        }))
-      })
-    }), jsx("tbody", {
-      children: data.map((obj, index) => jsx("tr", {
-        children: itemsSchema && Object.keys(itemsSchema).map((headNames, ix) => {
-          return jsx("td", {
-            children: obj[headNames]
-          }, ix);
-        })
-      }, index))
-    })]
-  });
-};
-const isObjectArrayEmpty = currentData => {
-  const result = isEmpty$1(currentData) || JSON.stringify(currentData) === '[{}]';
-  return result;
-};
-const renderNoneGivenText = data => {
-  return !data ? jsxs(Fragment, {
-    children: [jsx(NoneGivenTableText, {
-      children: "(none given)"
-    }), jsx("br", {})]
-  }) : data;
-};
-const renderCellColumn = ({
-  data,
-  error,
-  errors,
-  index,
-  rowPath,
-  element,
-  isRequired
-}) => {
-  const renderWarningCell = error => {
-    return jsxs(HilightCellWarning, {
-      children: [renderNoneGivenText(data), error && jsxs(ObjectArrayWarningIconDiv, {
-        children: [jsx(GoabIcon, {
-          type: "warning",
-          title: "warning",
-          size: "small",
-          theme: "filled",
-          mt: "2xs"
-        }), error ? error : '']
-      })]
-    });
-  };
-  if (data === undefined && isRequired || error !== '' && error !== undefined) {
-    const message = error || (isRequired && data === undefined ? 'Required' : data);
-    return renderWarningCell(message);
-  } else if (data === undefined && !isRequired) {
-    return renderWarningCell('');
-  } else if (data !== undefined && isRequired && error) {
-    return renderWarningCell(error);
-  }
-  const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
-  const nestedErrors = errors == null ? void 0 : errors.filter(e => e.instancePath.includes(path));
-  /* istanbul ignore next */
-  if (typeof data === 'boolean') {
-    return data ? 'Yes' : 'No';
-  } else if (typeof data === 'number') {
-    return String(data);
-  } else if (typeof data === 'string') {
-    return data;
-  } else if (typeof data === 'object' || Array.isArray(data)) {
-    const result = Object.keys(data);
-    if (!isRequired && nestedErrors.length === 0) {
-      if ('year' in data && 'month' in data && ('day' in data || 'date' in data)) {
-        const dateObj = data;
-        const dayValue = 'day' in dateObj ? dateObj.day : dateObj.date;
-        return `${dateObj.year}-${dateObj.month}-${dayValue}`;
-      }
-      return jsx("pre", {
-        style: jsonPreviewStyle,
-        children: JSON.stringify(data, null, 2)
-      });
-    } else if (result.length === 0) {
-      return renderWarningCell();
-    } else if (result.length > 0 && (isObjectArrayEmpty(data) || nestedErrors.length > 0)) {
-      return jsx("pre", {
-        style: jsonPreviewStyle,
-        children: renderWarningCell(JSON.stringify(data, null, 2))
-      });
-    } else if (data !== undefined && result.length > 0 && error !== '' && error !== undefined) {
-      const values = Object.values(data);
-      if (values && values.length > 0) {
-        return jsx("pre", {
-          style: jsonPreviewStyle,
-          children: renderWarningCell(JSON.stringify(values.at(0), null, 2))
-        });
-      }
-    } else {
-      const firstRow = Array.isArray(data) ? data[0] : undefined;
-      const columnLabels = extractNames(firstRow);
-      return jsx(DataTable, {
-        itemsSchema: data[0],
-        data: data,
-        columnLabels: columnLabels
-      });
-    }
-  }
-  return null;
-};
-const createHumanizeError = (error, schema, uischema) => {
-  let humanMessage;
-  if (error) {
-    try {
-      humanMessage = humanizeAjvError(error, schema, uischema);
-      if (typeof humanMessage === 'string' && (humanMessage.includes('must have required property') || humanMessage.includes(REQUIRED_PROPERTY_ERROR))) {
-        const propertyMatch = humanMessage.match(/'([^']+)'/);
-        if (propertyMatch && propertyMatch[1]) {
-          humanMessage = prettify(propertyMatch[1]) + ' is required';
-        }
-      }
-    } catch (err) {
-      const raw = error.message;
-      const propertyMatch = raw == null ? void 0 : raw.match(/'([^']+)'/);
-      if (propertyMatch && propertyMatch[1]) {
-        humanMessage = prettify(propertyMatch[1]) + ' is required';
-      } else {
-        humanMessage = raw;
-      }
-    }
-  }
-  return humanMessage;
-};
-
 const _excluded$4 = ["label", "path", "schema", "rootSchema", "uischema", "errors", "visible", "enabled", "cells", "data", "config", "isStepperReview", "handleChange", "removeItems"];
 const GenerateRows = (Cell, schema, rowPath, enabled, openDeleteDialog, handleChange, cells, uischema, isInReview, count, data, errors) => {
   if ((schema == null ? void 0 : schema.type) === 'object') {
@@ -12459,7 +12455,7 @@ const NonEmptyCell = ownProps => {
   const emptyCellProps = ctxToNonEmptyCellProps(ctx, Object.assign({}, ownProps, {
     data
   }));
-  const isValid = isEmpty(emptyCellProps.errors);
+  const isValid = isEmpty$1(emptyCellProps.errors);
   return jsx(NonEmptyCellComponent, Object.assign({}, emptyCellProps, {
     handleChange: ownProps == null ? void 0 : ownProps.handleChange,
     isInReview: ownProps == null ? void 0 : ownProps.isInReview,
@@ -12753,7 +12749,7 @@ const ObjectArrayControl = props => {
     });
   }
   const content = jsxs(Visible, {
-    visible: visible,
+    "$visible": visible,
     "data-testid": "jsonforms-object-list-wrapper",
     children: [jsxs(ToolBarHeader, {
       children: [listTitle && jsxs(ObjectArrayTitle, {
@@ -12809,7 +12805,7 @@ const ArrayControl = props => {
     handleChange
   } = props;
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx(ObjectArrayControl, Object.assign({}, props, {
       handleChange: handleChange
     }))
@@ -12822,7 +12818,7 @@ const ArrayControlBase = props => {
     visible
   } = props;
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx(ArrayControl, Object.assign({
       arraySchema: {}
     }, props, {
@@ -12912,7 +12908,7 @@ const PrimitiveArrayControl = props => {
   if (options.format === 'checkboxes') {
     const checkboxOptions = getPrimitiveArrayOptions(schema);
     return jsxs(Visible, {
-      visible: visible,
+      "$visible": visible,
       children: [jsx("h4", {
         children: prettyLabel
       }), jsx("div", {
@@ -12946,7 +12942,7 @@ const PrimitiveArrayControl = props => {
     });
   }
   return jsxs(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: [jsx("div", {
       style: {
         marginBottom: '8px'
@@ -13089,7 +13085,7 @@ const ListWithDetailsControl = props => {
     // eslint-disable-next-line
   }, [core == null ? void 0 : core.data, deleteTrigger, fileList, handleChange, path, props.data, props.schema, removeItems, rowData]);
   return jsxs(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: [jsx(ListWithDetailControl, Object.assign({}, props, {
       openDeleteDialog: openDeleteDialog,
       enabled: props.enabled,
@@ -13513,7 +13509,7 @@ const GoAGroupControlComponent = props => {
   const componentProps = (_group$options = group.options) == null ? void 0 : _group$options.componentProps;
   const accent = componentProps == null ? void 0 : componentProps.accent;
   return jsxs(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: [accent === 'thick' && jsx(GoabContainer, Object.assign({
       heading: group.label
     }, componentProps, {
@@ -13850,7 +13846,7 @@ const HelpContentComponent = _ref2 => {
   if (markdown && ((_uischema$options7 = uischema.options) == null ? void 0 : _uischema$options7.variant) === 'details') {
     var _uischema$options8, _uischema$options9, _uischema$elements;
     return jsx(Visible, {
-      visible: visible,
+      "$visible": visible,
       children: jsx(HelpContentDiv, {
         "aria-label": (_uischema$options8 = uischema.options) == null ? void 0 : _uischema$options8.ariaLabel,
         children: jsx("div", {
@@ -13875,7 +13871,7 @@ const HelpContentComponent = _ref2 => {
   if (markdown) {
     var _uischema$options0;
     return jsx(Visible, {
-      visible: visible,
+      "$visible": visible,
       children: jsx("div", {
         className: "help-content-markdown",
         children: MarkdownComponent({
@@ -13885,7 +13881,7 @@ const HelpContentComponent = _ref2 => {
     });
   }
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx(HelpContentDiv, {
       "aria-label": (_uischema$options1 = uischema.options) == null ? void 0 : _uischema$options1.ariaLabel,
       children: jsxs("div", {
@@ -14309,7 +14305,7 @@ const FormStepperView = props => {
   return jsxs("div", {
     "data-testid": "form-stepper-test-wrapper",
     children: [jsx(Visible, {
-      visible: visible,
+      "$visible": visible,
       children: jsxs("div", {
         id: `${path || `goa`}-form-stepper`,
         className: "formStepper",
@@ -14875,7 +14871,7 @@ const RenderPages = props => {
     "data-testid": "form-stepper-test-wrapper",
     ref: topElementRef,
     children: [jsx(Visible, {
-      visible: visible,
+      "$visible": visible,
       children: jsx("div", {
         id: `${path || `goa`}-form-pages`,
         children: jsxs(PageBorder, {
@@ -14888,7 +14884,7 @@ const RenderPages = props => {
             },
             testId: "back-to-tasks"
           }), !isOnReview && jsx(Visible, {
-            visible: true,
+            "$visible": true,
             children: jsxs("div", {
               "data-testid": `step_${activeId}-content-pages`,
               style: {
@@ -15302,7 +15298,7 @@ const FileUploader = _ref => {
     });
   };
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsxs(FileUploaderStyle, {
       className: "FileUploader",
       children: [jsx(GoabFormItem, {
@@ -17806,7 +17802,7 @@ const AddressLookUpControl = props => {
   }, [formStepperCtx, uischema == null ? void 0 : uischema.scope]);
   const readOnly = (_uischema$options$com = uischema == null || (_uischema$options2 = uischema.options) == null || (_uischema$options2 = _uischema$options2.componentProps) == null ? void 0 : _uischema$options2.readOnly) != null ? _uischema$options$com : false;
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsxs("div", {
       ref: addressContainerRef,
       children: [renderHelp(), jsx("h3", {
@@ -18127,7 +18123,7 @@ const FullNameControl = props => {
     }
   }, [stepperState == null ? void 0 : stepperState.targetScope, uischema.scope]);
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx("div", {
       ref: controlRef,
       children: jsx(NameInputs, {
@@ -18276,7 +18272,7 @@ const FullNameDobControl = props => {
     }
   }, [stepperState == null ? void 0 : stepperState.targetScope, uischema.scope]);
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsxs("div", {
       ref: controlRef,
       children: [jsx(NameInputs, {
@@ -18559,7 +18555,7 @@ const GoACalculation = props => {
   const isConfigError = !!error && (error.toLowerCase().includes('invalid scope') || error.toLowerCase().includes('expression syntax'));
   const showError = !!error && (isConfigError || hasInteracted);
   return jsx(Visible, {
-    visible: visible,
+    "$visible": visible,
     children: jsx(GoabFormItem, {
       label: label,
       error: showError ? error : '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.67.7",
+  "version": "2.67.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/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-06-24T15:43:06.124Z",
-  "sourceCommit": "08d590f507a0d7cc7dfd71287692ce6bc227e6df",
+  "generatedAt": "2026-06-29T16:46:14.758Z",
+  "sourceCommit": "93bf60904fe3b0d817567ca58221da220d84e60f",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

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

@@ -1,26 +1,10 @@
+import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsCellRendererRegistryEntry, ArrayTranslations, UISchemaElement } from '@jsonforms/core';
 import React from 'react';
 import type { ErrorObject } from 'ajv';
-import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, UISchemaElement, Layout } from '@jsonforms/core';
 import { WithDeleteDialogSupport } from './DeleteDialog';
+import { NonEmptyRowComponentProps } from './ListWithDetailTypes';
 export type ObjectArrayControlProps = ArrayLayoutProps & WithDeleteDialogSupport;
 export declare const extractScopesFromUISchema: (uischema: any) => string[];
-export interface EmptyListProps {
-    numColumns: number;
-    noDataMessage: string;
-    translations: ArrayTranslations;
-}
-interface NonEmptyRowComponentProps {
-    propName?: string;
-    schema: JsonSchema;
-    rootSchema?: JsonSchema;
-    rowPath: string;
-    errors: string;
-    enabled: boolean;
-    renderers?: JsonFormsRendererRegistryEntry[];
-    cells?: JsonFormsCellRendererRegistryEntry[];
-    isValid: boolean;
-    uischema?: ControlElement | Layout;
-}
 export declare const NonEmptyCellComponent: React.NamedExoticComponent<NonEmptyRowComponentProps>;
 interface NonEmptyRowProps {
     childPath: string;

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

@@ -0,0 +1,92 @@
+import { ArrayLayoutProps, ArrayTranslations, ControlElement, JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
+import { WithDeleteDialogSupport } from './DeleteDialog';
+export type ListWithDetailArrayControlProps = ArrayLayoutProps & WithDeleteDialogSupport;
+export interface EmptyListProps {
+    numColumns: number;
+    noDataMessage: string;
+    translations: ArrayTranslations;
+}
+export interface NonEmptyCellProps extends OwnPropsOfNonEmptyCell {
+    rootSchema?: JsonSchema;
+    errors: string;
+    enabled: boolean;
+}
+export interface OwnPropsOfNonEmptyCell {
+    rowPath: string;
+    propName?: string;
+    schema: JsonSchema;
+    enabled: boolean;
+    renderers?: JsonFormsRendererRegistryEntry[];
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    uischema?: ControlElement;
+}
+export interface NonEmptyRowComponentProps {
+    propName?: string;
+    schema: JsonSchema;
+    rootSchema?: JsonSchema;
+    rowPath: string;
+    errors: string;
+    enabled: boolean;
+    renderers?: JsonFormsRendererRegistryEntry[];
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    isValid: boolean;
+    uischema?: ControlElement | Layout;
+}
+export interface NonEmptyRowProps {
+    childPath: string;
+    schema: JsonSchema;
+    rowIndex: number;
+    showSortButtons: boolean;
+    enabled: boolean;
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    path: string;
+    translations: ArrayTranslations;
+    uischema: ControlElement;
+    listTitle?: string;
+}
+export interface MainRowProps {
+    childPath: string;
+    rowIndex: number;
+    enabled: boolean;
+    currentTab: number;
+    current: HTMLElement | null;
+    selectCurrentTab: (index: number) => void;
+    setCurrentListPage: (index: number) => void;
+    rowData?: Record<string, any>;
+    uischema?: ControlElement;
+    schema?: JsonSchema;
+}
+export interface LeftRowProps {
+    childPath: string;
+    rowIndex: number;
+    enabled: boolean;
+    currentTab: number;
+    current: HTMLElement | null;
+    selectCurrentTab: (index: number) => void;
+    rowData?: Record<string, any>;
+    uischema?: ControlElement;
+    schema?: JsonSchema;
+    name: string;
+    translations: ArrayTranslations;
+}
+export interface TableRowsProp {
+    data: number;
+    path: string;
+    schema: JsonSchema;
+    uischema: ControlElement;
+    config?: any;
+    enabled: boolean;
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    translations: ArrayTranslations;
+    currentIndex: number;
+    setCurrentIndex: (index: number) => void;
+    setCurrentListPage: (index: number) => void;
+    currentListPage: number;
+    listTitle?: string;
+    errors: string;
+}
+export interface SummaryDisplayProps {
+    rowData: Record<string, unknown> | undefined;
+    uischema?: UISchemaElement;
+    schema?: JsonSchema;
+}

package/src/lib/common/Constants.d.ts

@@ -10,4 +10,14 @@ export declare const ADDRESS_LOOKUP_LABELS: {
     readonly subdivisionCode: "Province";
     readonly country: "Country";
 };
+export declare const VALIDATION_KEYWORDS: {
+    REQUIRED: string;
+    MIN_LENGTH: string;
+    MAX_LENGTH: string;
+    FORMAT: string;
+    MINIMUM: string;
+    MAXIMUM: string;
+    TYPE: string;
+    ERROR_MESSAGE: string;
+};
 export declare const getAddressLookupFieldLabel: (fieldName: string) => string;

package/src/lib/util/style-component.d.ts

@@ -1,6 +1,6 @@
 export declare const VerticalLayout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Visible: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "visible"> & {
-    visible: boolean | undefined;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "visible"> & {
-    visible: boolean | undefined;
+export declare const Visible: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$visible"> & {
+    $visible?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$visible"> & {
+    $visible?: boolean;
 }, never>>> & string;