@abgov/jsonforms-components 2.75.3 → 2.76.1

package/index.esm.js

@@ -5003,6 +5003,11 @@ const checkFieldValidity = (props, rootData) => {
   if (isRegisterBackedEnum) {
     return '';
   }
+  const isSinField = resolveFormatConfig(schema) === DEFAULT_PATTERNS.sin;
+  const hasSinFormat = isSinField && typeof data === 'string' && DEFAULT_PATTERNS.sin.pattern.test(data);
+  if (hasSinFormat && !validateSinWithLuhn(data)) {
+    return invalidSin;
+  }
   if (!ajvErrors || ajvErrors === invalidSin) {
     return ajvErrors;
   }
@@ -10066,14 +10071,26 @@ const resetInputValue = (detail, value) => {
     target.value = value;
   }
 };
+const resolveTextMaskOptions = (schema, uischema) => {
+  var _formatConfig$mask, _uischema$options, _uischema$options2;
+  const formatConfig = resolveFormatConfig(schema);
+  const mask = (_formatConfig$mask = formatConfig == null ? void 0 : formatConfig.mask) != null ? _formatConfig$mask : uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.mask;
+  // In-place shows the fill-in template and keeps the caret in place while editing.
+  const inPlace = !!mask && (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.inPlace) === true;
+  return {
+    formatConfig,
+    mask,
+    inPlace
+  };
+};
 const GoAInputText = props => {
-  return jsxs(JsonFormRegisterProvider, {
+  return jsx(JsonFormRegisterProvider, {
     defaultRegisters: undefined,
-    children: [jsx(InnerGoAInputText, Object.assign({}, props)), ' ']
+    children: jsx(InnerGoAInputText, Object.assign({}, props))
   });
 };
 const InnerGoAInputText = props => {
-  var _formatConfig$mask, _uischema$options, _uischema$options2, _uischema$options$com, _uischema$options3, _props$uischema, _uischema$options4, _uischema$options5, _uischema$options$pla, _uischema$options6, _props$uischema2, _uischema$options7, _uischema$options8, _uischema$options$com2, _uischema$options9, _uischema$options0, _uischema$options1, _uischema$options10;
+  var _uischema$options$com, _uischema$options3, _props$uischema, _uischema$options4, _uischema$options5, _uischema$options$pla, _uischema$options6, _props$uischema2, _uischema$options7, _uischema$options8, _uischema$options$com2, _uischema$options9, _uischema$options0, _uischema$options1, _uischema$options10;
   const {
     data,
     config,
@@ -10089,11 +10106,12 @@ const InnerGoAInputText = props => {
     setIsVisited
   } = props;
   // Detect the mask format from the JSON schema `format` (with the SIN title kept for backward compatibility).
-  const formatConfig = resolveFormatConfig(schema);
-  const mask = (_formatConfig$mask = formatConfig == null ? void 0 : formatConfig.mask) != null ? _formatConfig$mask : uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.mask;
+  const {
+    formatConfig,
+    mask,
+    inPlace
+  } = resolveTextMaskOptions(schema, uischema);
   const allowedKeys = formatConfig == null ? void 0 : formatConfig.allowedKeys;
-  // In-place shows the fill-in template and keeps the caret in place while editing.
-  const inPlace = !!mask && (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.inPlace) === true;
   const toDisplay = value => {
     if (!mask) {
       return value;
@@ -10114,11 +10132,15 @@ const InnerGoAInputText = props => {
   const hasDefault = Object.prototype.hasOwnProperty.call(schema, 'default');
   useEffect(() => {
     if (data === undefined || data === null) {
+      if (!mask) {
+        return;
+      }
+      setLocalValue(toDisplay(''));
       return;
     }
     setLocalValue(toDisplay(data));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, mask]);
+  }, [data, mask, inPlace]);
   useEffect(() => {
     if (typeof handleChange === 'function' && hasDefault && data === undefined && !manualInput) {
       handleChange(props.path, schema.default);
@@ -10280,7 +10302,7 @@ const InnerGoAInputText = props => {
           }
         }
       }
-    }, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.componentProps))
+    }, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.componentProps), `${mask != null ? mask : ''}:${inPlace}`)
   });
 };
 const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -13908,11 +13930,9 @@ const useMaskedInput = ({
   // In-place mounts empty then sets the template so the web component reflects it (a value change forces the paint).
   const [value, setValue] = useState(inPlace ? '' : initialDisplay);
   useEffect(() => {
-    if (inPlace) {
-      setValue(initialDisplay);
-    }
+    setValue(format(typeof data === 'string' ? data : ''));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [mask, inPlace]);
   const handleChange = detail => {
     var _target$selectionStar;
     const rawValue = detail.value;
@@ -14014,7 +14034,7 @@ const PhoneNumberControl = props => {
         onChange: detail => handleMaskChange(detail),
         onKeyPress: detail => handleKeyPress(detail),
         width: "100%"
-      })
+      }, `${phoneMask}:${inPlace}`)
     })
   });
 };
@@ -20640,6 +20660,26 @@ var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
 
 // Allow empty values so incomplete fields are not treated as format errors.
 const optionalFormat = pattern => input => !input || pattern.test(input);
+// format: sin still rejects a bad checksum so the field is invalid; the UI maps this
+// to "Social insurance number is invalid" once the pattern already matches.
+const optionalSinFormat = input => {
+  if (!input) {
+    return true;
+  }
+  if (!DEFAULT_PATTERNS.sin.pattern.test(input)) {
+    return false;
+  }
+  return validateSinWithLuhn(input);
+};
+const isValidSinWhenComplete = data => {
+  if (typeof data !== 'string' || data.length === 0) {
+    return true;
+  }
+  if (!DEFAULT_PATTERNS.sin.pattern.test(data)) {
+    return true;
+  }
+  return validateSinWithLuhn(data);
+};
 const createDefaultAjv = (...schemas) => {
   const ajv = new Ajv({
     allErrors: true,
@@ -20654,7 +20694,7 @@ const createDefaultAjv = (...schemas) => {
   addFormats(ajv);
   ajv.addFormat('time', /^([01]\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/);
   Object.entries(DEFAULT_PATTERNS).forEach(([format, config]) => {
-    ajv.addFormat(format, optionalFormat(config.pattern));
+    ajv.addFormat(format, format === 'sin' ? optionalSinFormat : optionalFormat(config.pattern));
   });
   ajv.addFormat('phone', PHONE_REGEX);
   ajv.addFormat('computed', /^[a-zA-Z0-9._-]+$/);
@@ -20676,14 +20716,10 @@ const createDefaultAjv = (...schemas) => {
     type: 'string',
     schemaType: 'boolean',
     validate: (shouldValidate, data) => {
-      if (!shouldValidate) return true;
-      if (typeof data !== 'string' || data.length === 0) {
-        return true;
-      }
-      if (!/^\d{3} \d{3} \d{3}$/.test(data)) {
+      if (shouldValidate === false) {
         return true;
       }
-      return validateSinWithLuhn(data);
+      return isValidSinWhenComplete(data);
     },
     error: {
       message: invalidSin

package/package.json

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

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-10T20:48:43.882Z",
-  "sourceCommit": "5a1d458e5df0177e45371e7770719fd29fb0b773",
+  "generatedAt": "2026-09-14T21:52:08.453Z",
+  "sourceCommit": "b562ac4773b80256cc170680e106826f7696b070",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [