@abgov/jsonforms-components 2.40.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';
@@ -14,7 +14,7 @@ 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 { Parser } from 'expr-eval-fork';
 import Ajv from 'ajv';
 import addErrors from 'ajv-errors';
 import addFormats from 'ajv-formats';
@@ -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);
 
@@ -6601,8 +6601,32 @@ const CheckBoxGroupDiv = styled.div(_t$8 || (_t$8 = _$8`
   }
 `));
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getEnumOptions = schema => {
+  var _a, _b;
+  if (((_a = schema === null || schema === void 0 ? void 0 : schema.items) === null || _a === void 0 ? void 0 : _a.oneOf) && Array.isArray(schema.items.oneOf)) {
+    return schema.items.oneOf;
+  }
+  if ((schema === null || schema === void 0 ? void 0 : schema.oneOf) && Array.isArray(schema.oneOf)) {
+    return schema.oneOf;
+  }
+  const newSchema = schema;
+  return (schema === null || schema === void 0 ? void 0 : schema.enum) || ((_b = newSchema === null || newSchema === void 0 ? void 0 : newSchema.items) === null || _b === void 0 ? void 0 : _b.enum) || [];
+};
+const getOptionValue = option => {
+  return typeof option === 'string' ? option : option.const;
+};
+const getOptionLabel = option => {
+  if (typeof option === 'string') {
+    return option;
+  }
+  return option.title || option.const;
+};
+const getOptionDescription = option => {
+  return typeof option === 'string' ? undefined : option.description;
+};
 const CheckboxGroup = props => {
-  var _a, _b, _c;
+  var _a, _b;
   const {
     data,
     id,
@@ -6615,20 +6639,23 @@ const CheckboxGroup = props => {
     label,
     enabled
   } = props;
-  const newSchema = schema;
-  const enumData = (schema === null || schema === void 0 ? void 0 : schema.enum) || ((_a = newSchema === null || newSchema === void 0 ? void 0 : newSchema.items) === null || _a === void 0 ? void 0 : _a.enum) || [];
+  const enumOptions = getEnumOptions(schema);
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
   return jsx(Checkboxes, {
-    orientation: ((_b = uischema.options) === null || _b === void 0 ? void 0 : _b.orientation) ? (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.orientation : 'vertical',
+    orientation: ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.orientation) ? (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.orientation : 'vertical',
     testId: `${label || id}-jsonforms-checkboxes`,
-    children: enumData.map(enumValue => {
+    children: enumOptions.map(enumOption => {
+      const enumValue = getOptionValue(enumOption);
+      const enumLabel = getOptionLabel(enumOption);
+      const enumDescription = getOptionDescription(enumOption);
       return jsx(GoACheckbox, Object.assign({
         name: enumValue,
         disabled: !enabled,
         checked: data ? data.includes(enumValue) : false,
         value: `${enumValue}`
       }, appliedUiSchemaOptions, {
-        text: enumValue,
+        text: enumLabel,
+        description: enumDescription,
         testId: `${enumValue}-checkbox`,
         onChange: (name, value) => {
           let newData = Array.isArray(data) ? [...data] : [];
@@ -6639,7 +6666,7 @@ const CheckboxGroup = props => {
           }
           handleChange(path, newData.length === 0 ? undefined : newData);
         }
-      }));
+      }), enumValue);
     })
   });
 };
@@ -6975,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,
@@ -11067,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;
@@ -11362,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,
@@ -11384,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, {
@@ -13901,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.40.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",
@@ -13,7 +13,7 @@
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",
     "@mdx-js/mdx": "^3.1.0",
-    "expr-eval": "^2.0.2",
+    "expr-eval-fork": "^3.0.1",
     "pluralize": "^8.0.0"
   },
   "dependencies": {

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;