@abgov/jsonforms-components 2.67.6 → 2.67.8

package/index.esm.js

@@ -1,22 +1,23 @@
-import * as runtime from 'react/jsx-runtime';
 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 { evaluateSync, compileSync } from '@mdx-js/mdx';
+import { compileSync } from '@mdx-js/mdx';
+import ReactMarkdown from 'react-markdown';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import { Parser } from 'expr-eval-fork';
 import addErrors from 'ajv-errors';
 import addFormats from 'ajv-formats';
@@ -7269,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;
 };
@@ -9108,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;
@@ -9243,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);
@@ -9327,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
   }));
@@ -9376,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;
   }
@@ -9572,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);
@@ -9603,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);
@@ -9728,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('/');
@@ -9740,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';
             }
@@ -9768,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';
             }
@@ -9787,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;
@@ -10603,7 +10789,7 @@ const LayoutRenderer = ({
   visible,
   width
 }) => {
-  if (isEmpty(elements)) {
+  if (isEmpty$1(elements)) {
     return null;
   } else {
     if (direction === 'row') {
@@ -10633,7 +10819,7 @@ const ReviewLayoutRenderer = ({
   visible,
   width
 }) => {
-  if (isEmpty(elements)) {
+  if (isEmpty$1(elements)) {
     return null;
   } else {
     if (direction === 'row') {
@@ -11940,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') {
@@ -12458,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,
@@ -13734,13 +13731,24 @@ const RenderLink = props => {
   });
 };
 
-const _excluded$3 = ["isParent", "showLabel"];
+const _excluded$3 = ["node"],
+  _excluded2 = ["isParent", "showLabel"];
 const markdownComponents = {
-  a: props => jsx("a", Object.assign({}, props, {
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }))
+  // Destructure node out (react-markdown internal prop) so it is not forwarded to the DOM element.
+  a: _ref => {
+    let props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    return jsx("a", Object.assign({}, props, {
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }));
+  }
 };
+// rehype-sanitize strips dangerous HTML (script tags, event-handler attributes, javascript: hrefs, etc.)
+// from the HAST tree before rendering. defaultSchema allows standard HTML but blocks XSS vectors.
+// Cast required: react-markdown vendors its own copy of unified, causing a type mismatch with the
+// top-level unified package even though the runtime behaviour is identical.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const rehypePlugins = [[rehypeSanitize, defaultSchema]];
 const HelpContentReviewComponent = () => {
   return jsx(Fragment, {
     children: " "
@@ -13750,7 +13758,11 @@ const checkMarkDownIsValid = markdown => {
   let isValid = true;
   let error = '';
   try {
-    compileSync(markdown, {});
+    // clean-code-ignore: 2.14
+    // to allow testing the compile and catching the error
+    compileSync(markdown, {
+      rehypePlugins: [[rehypeSanitize, defaultSchema]]
+    });
   } catch (err) {
     if (err instanceof Error) {
       error = err.message;
@@ -13768,26 +13780,23 @@ const MarkdownComponent = ({
 }) => {
   const response = checkMarkDownIsValid(markdown);
   if (response.isValid) {
-    const {
-      default: MDXContent
-    } = evaluateSync(markdown, Object.assign({}, runtime, {
-      Fragment: React.Fragment
-    }));
-    return /*#__PURE__*/React.createElement(MDXContent, {
-      components: markdownComponents
+    return jsx(ReactMarkdown, {
+      rehypePlugins: rehypePlugins,
+      components: markdownComponents,
+      children: markdown
     });
   }
   return jsxs(InvalidMarkdown, {
     children: ["Help content markdown is invalid: ", response.error, " "]
   });
 };
-const HelpContentComponent = _ref => {
+const HelpContentComponent = _ref2 => {
   var _uischema$options, _uischema$options$mar, _uischema$options2, _uischema$options3, _uischema$options4, _uischema$options5, _uischema$options6, _uischema$options7, _uischema$options1, _uischema$options10, _uischema$options11, _uischema$options12, _uischema$options13, _uischema$options14, _uischema$options15, _uischema$options16, _uischema$options17, _uischema$elements2, _uischema$options18;
   let {
       isParent = true,
       showLabel = true
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const labelClass = isParent ? 'parent-label' : 'child-label';
   const marginClass = isParent ? 'parent-margin' : 'child-margin';
   // eslint-disable-next-line

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.67.6",
+  "version": "2.67.8",
   "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",
@@ -17,7 +17,9 @@
     "ajv-formats": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",
     "expr-eval-fork": "^3.0.1",
-    "pluralize": "^8.0.0"
+    "pluralize": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "react-markdown": "^8.0.3"
   },
   "dependencies": {
     "axios": "^1.15.2",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-06-23T21:16:03.119Z",
-  "sourceCommit": "a83b527a2f034d3e3d4699630165799b4f644517",
+  "generatedAt": "2026-06-25T21:22:05.583Z",
+  "sourceCommit": "a25b638498bc63728b41889ca6e86a9972cfde8a",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/Additional/HelpContent.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { RankedTester } from '@jsonforms/core';
 import { ControlProps, ControlElement } from '@jsonforms/core';
-import * as runtime from 'react/jsx-runtime';
-import './HelpContent.css';
+import './HelpContent';
 interface OptionProps {
     ariaLabel?: string;
     help?: string | string[];
@@ -29,7 +28,9 @@ interface MdxMarkdown {
     markdown: string;
 }
 export declare const markdownComponents: {
-    a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => runtime.JSX.Element;
+    a: ({ node, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        node?: unknown;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const MarkdownComponent: ({ markdown }: MdxMarkdown) => JSX.Element;
 export declare const HelpContentComponent: ({ isParent, showLabel, ...props }: CustomControlProps & ExtraHelpContentProps) => JSX.Element;

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;