@abgov/jsonforms-components 2.41.0 → 2.41.1

package/index.esm.js

@@ -5,7 +5,7 @@ import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputD
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isControl, isEnumControl, isBooleanControl, schemaMatches, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, toDataPath, hasType, isCategorization, isLayout } from '@jsonforms/core';
+import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isControl as isControl$1, isEnumControl, isBooleanControl, schemaMatches, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, toDataPath, Resolve, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, useJsonForms, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsAllOfProps, withJsonFormsCellProps } from '@jsonforms/react';
 import * as _$c from 'lodash';
 import ___default, { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
@@ -6426,7 +6426,7 @@ const enumControl = props => {
 };
 const GoAEnumControlTester = rankWith(4, (uischema, schema, context) => {
   var _a;
-  return (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && isControl(uischema) && ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.format) === 'enum' || isEnumControl(uischema, schema, context);
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && isControl$1(uischema) && ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.format) === 'enum' || isEnumControl(uischema, schema, context);
 });
 const GoAEnumControl = withJsonFormsEnumProps(withTranslateProps(enumControl), true);
 
@@ -7002,7 +7002,7 @@ const GoAEmailInput = props => {
   });
 };
 const GoAEmailControl = props => jsx(GoAEmailInput, Object.assign({}, props));
-const GoAEmailControlTester = rankWith(4, and(isControl, schemaMatches(schema => schema.format === 'email')));
+const GoAEmailControlTester = rankWith(4, and(isControl$1, schemaMatches(schema => schema.format === 'email')));
 const GoAInputEmailControl = withJsonFormsControlProps(GoAEmailControl);
 
 let _$7 = t => t,
@@ -11094,6 +11094,25 @@ const getItemsTitle = schema => {
   }
   return undefined;
 };
+function isControl(uischema) {
+  return uischema.type === 'Control';
+}
+function hasElements$1(uischema) {
+  return Array.isArray(uischema.elements);
+}
+function hasDetail(uischema) {
+  var _a;
+  return uischema.type === 'ListWithDetail' && typeof ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.detail) === 'object';
+}
+function normalizeLabel(label) {
+  if (typeof label === 'string') {
+    return label;
+  }
+  if (typeof label === 'object' && label !== null) {
+    return label.text;
+  }
+  return;
+}
 // eslint-disable-next-line
 const extractScopesFromUISchema = uischema => {
   var _a, _b, _c, _d, _e, _f;
@@ -11389,6 +11408,84 @@ function orderRowData(rowData, detailUiSchema) {
   }
   return ordered;
 }
+function getEffectiveInstancePath(error) {
+  var _a;
+  if (error.keyword === 'required' && ((_a = error.params) === null || _a === void 0 ? void 0 : _a.missingProperty)) {
+    return `${error.instancePath}/${error.params.missingProperty}`;
+  }
+  return error.instancePath;
+}
+function prettify(prop) {
+  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
+}
+function resolveLabel(instancePath, schema, uischema) {
+  const prop = instancePath.split('/').filter(Boolean).pop();
+  const scope = `#/properties/${prop}`;
+  if (uischema) {
+    const uiLabel = findControlLabel(uischema, scope);
+    if (uiLabel) {
+      return uiLabel;
+    }
+  }
+  const schemaPath = ajvPathToSchemaPath(instancePath);
+  const resolvedSchema = Resolve.schema(schema, schemaPath, schema);
+  if (resolvedSchema === null || resolvedSchema === void 0 ? void 0 : resolvedSchema.title) {
+    return resolvedSchema.title;
+  }
+  return prettify(prop || 'Unknown field');
+}
+function ajvPathToSchemaPath(instancePath) {
+  const parts = instancePath.split('/').filter(Boolean);
+  const result = [];
+  for (const part of parts) {
+    if (!isNaN(Number(part))) {
+      // array index → items
+      result.push('items');
+    } else {
+      result.push('properties', part);
+    }
+  }
+  return result.join('.');
+}
+function findControlLabel(uischema, scope) {
+  if (isControl(uischema) && uischema.scope === scope) {
+    return normalizeLabel(uischema.label);
+  }
+  if (hasDetail(uischema)) {
+    const found = findControlLabel(uischema.options.detail, scope);
+    if (found) return found;
+  }
+  if (hasElements$1(uischema)) {
+    for (const el of uischema.elements) {
+      const found = findControlLabel(el, scope);
+      if (found) return found;
+    }
+  }
+  return;
+}
+function humanizeAjvError(error, schema, uischema) {
+  var _a;
+  const path = getEffectiveInstancePath(error);
+  const label = resolveLabel(path, schema, uischema);
+  switch (error.keyword) {
+    case 'required':
+      return `${label} is required`;
+    case 'minLength':
+      return `${label} must be at least ${error.params.limit} characters`;
+    case 'maxLength':
+      return `${label} must be at most ${error.params.limit} characters`;
+    case 'format':
+      return `${label} must be a valid ${error.params.format}`;
+    case 'minimum':
+      return `${label} must be ≥ ${error.params.limit}`;
+    case 'maximum':
+      return `${label} must be ≤ ${error.params.limit}`;
+    case 'type':
+      return `${label} must be a ${error.params.type}`;
+    default:
+      return `${label} ${(_a = error.message) !== null && _a !== void 0 ? _a : ''}`.trim();
+  }
+}
 const MainTab = ({
   childPath,
   rowIndex,
@@ -11411,10 +11508,10 @@ const MainTab = ({
   const rowErrors = (_b = core === null || core === void 0 ? void 0 : core.errors) === null || _b === void 0 ? void 0 : _b.filter(e => {
     const base = `/${childPath.replace(/\./g, '/')}`;
     return e.instancePath === base || e.instancePath.startsWith(base + '/');
-  }).map(e => {
-    var _a, _b;
-    return ((_b = (_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a)) || '';
-  }).filter(msg => msg.length > 0).map((msg, index, arr) => `${msg}${index < arr.length - 1 ? ', ' : ''}`);
+  }).filter(e => {
+    var _a;
+    return (((_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+  }).map(e => humanizeAjvError(e, core.schema, core.uischema)).map((msg, index, arr) => `${msg}${index < arr.length - 1 ? ', ' : ''}`);
   return jsx("div", {
     "data-testid": `object-array-main-item-${rowIndex}`,
     children: (rowErrors === null || rowErrors === void 0 ? void 0 : rowErrors.length) ? jsx(GoAFormItem, {
@@ -13928,11 +14025,11 @@ const getUISchemaErrors = (uiSchema, schema) => {
   if (isEmptyObject(uiSchema)) {
     return '';
   }
-  if (isControl(uiSchema) && (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && ((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.options) === null || _a === void 0 ? void 0 : _a.format) === 'enum' && ((_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.options) === null || _b === void 0 ? void 0 : _b.register) === undefined) {
+  if (isControl$1(uiSchema) && (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && ((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.options) === null || _a === void 0 ? void 0 : _a.format) === 'enum' && ((_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.options) === null || _b === void 0 ? void 0 : _b.register) === undefined) {
     return errMissingRegister;
   }
   // Check control elements
-  if (isControl(uiSchema) && hasType(uiSchema, 'Control')) {
+  if (isControl$1(uiSchema) && hasType(uiSchema, 'Control')) {
     if (!isScopedPrefixed(uiSchema.scope)) {
       return errMalformedScope(uiSchema.scope);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.41.0",
+  "version": "2.41.1",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, Layout } from '@jsonforms/core';
+import type { ErrorObject } from 'ajv';
+import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, UISchemaElement, Layout } from '@jsonforms/core';
 import { WithDeleteDialogSupport } from './DeleteDialog';
 export type ObjectArrayControlProps = ArrayLayoutProps & WithDeleteDialogSupport;
 export declare const extractScopesFromUISchema: (uischema: any) => string[];
@@ -33,6 +34,8 @@ interface NonEmptyRowProps {
     uischema: ControlElement;
     listTitle?: string;
 }
+export declare function findControlLabel(uischema: UISchemaElement, scope: string): string | undefined;
+export declare function humanizeAjvError(error: ErrorObject, schema: JsonSchema, uischema?: UISchemaElement): string;
 export declare const NonEmptyList: React.MemoExoticComponent<({ childPath, schema, enabled, cells, uischema, }: NonEmptyRowProps & WithDeleteDialogSupport) => import("react/jsx-runtime").JSX.Element>;
 interface ListWithDetailControlProps extends ObjectArrayControlProps {
     currentTab: number;