@abgov/jsonforms-components 2.75.2 → 2.76.0

package/index.esm.js

@@ -13890,10 +13890,17 @@ const FullNameDobReviewControl = props => {
 const GoAInputBaseFullNameDobControlReview = withJsonFormsAllOfProps(FullNameDobReviewControl);
 
 // Encapsulates masked-input state for a GoA input: display value, mount reflection, and change/keypress handling.
+const resetMaskedValue = (detail, nextValue) => {
+  const target = getMaskInputTarget(detail);
+  if (target) {
+    target.value = nextValue;
+  }
+};
 const useMaskedInput = ({
   mask,
   inPlace,
   data,
+  allowedKeys,
   onCommit
 }) => {
   const format = value => inPlace ? toMaskTemplate(value, mask) : formatWithPattern(value, mask);
@@ -13909,20 +13916,24 @@ const useMaskedInput = ({
   const handleChange = detail => {
     var _target$selectionStar;
     const rawValue = detail.value;
+    const cleaned = allowedKeys ? filterAllowedKeys(rawValue, allowedKeys) : rawValue;
     if (!inPlace) {
-      const stored = formatWithPattern(rawValue, mask);
+      const stored = cleaned === '' ? '' : formatWithPattern(cleaned, mask);
+      if (allowedKeys && cleaned !== rawValue) {
+        resetMaskedValue(detail, stored);
+      }
       setValue(stored);
       onCommit(stored);
       return;
     }
     const target = getMaskInputTarget(detail);
-    const caretIndex = (_target$selectionStar = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar : rawValue.length;
-    const overflow = overflowMaskEdit(value, rawValue, caretIndex, mask);
+    const caretIndex = (_target$selectionStar = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar : cleaned.length;
+    const overflow = overflowMaskEdit(value, cleaned, caretIndex, mask);
     if (overflow) {
       applyInPlaceEdit(target, overflow);
       return;
     }
-    const edit = computeMaskEdit(rawValue, caretIndex, mask);
+    const edit = computeMaskEdit(cleaned, caretIndex, mask);
     applyInPlaceEdit(target, edit);
     setValue(edit.display);
     onCommit(edit.stored);
@@ -13930,10 +13941,15 @@ const useMaskedInput = ({
   // In-place has no maxLength (the template is already full length) and GoA keyPress is keyup, so restore on overflow.
   const handleKeyPress = detail => {
     var _detail$event, _target$value, _target$selectionStar2;
-    if (!inPlace || !/^[A-Za-z0-9]$/.test(detail.key) || !isMaskFilled(value, mask)) {
+    const blockDisallowed = shouldBlockKey(detail.key, allowedKeys);
+    const blockOverflow = inPlace && /^[A-Za-z0-9]$/.test(detail.key) && isMaskFilled(value, mask);
+    if (!blockDisallowed && !blockOverflow) {
       return;
     }
     (_detail$event = detail.event) == null || _detail$event.preventDefault();
+    if (!blockOverflow) {
+      return;
+    }
     const target = getMaskInputTarget(detail);
     const rawValue = (_target$value = target == null ? void 0 : target.value) != null ? _target$value : value;
     const overflow = overflowMaskEdit(value, rawValue, (_target$selectionStar2 = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar2 : value.length, mask);
@@ -13973,6 +13989,7 @@ const PhoneNumberControl = props => {
     mask: phoneMask,
     inPlace,
     data,
+    allowedKeys: DEFAULT_PATTERNS.phone.allowedKeys,
     onCommit: stored => {
       setError(stored && !DEFAULT_PATTERNS.phone.pattern.test(stored) ? DEFAULT_PATTERNS.phone.error : '');
       handleChange(path, stored);
@@ -13995,7 +14012,7 @@ const PhoneNumberControl = props => {
         maxLength: inPlace ? undefined : phoneMask.length,
         placeholder: inPlace ? undefined : maskPlaceholder(phoneMask),
         onChange: detail => handleMaskChange(detail),
-        onKeyPress: inPlace ? detail => handleKeyPress(detail) : undefined,
+        onKeyPress: detail => handleKeyPress(detail),
         width: "100%"
       })
     })
@@ -20623,6 +20640,24 @@ var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
 
 // Allow empty values so incomplete fields are not treated as format errors.
 const optionalFormat = pattern => input => !input || pattern.test(input);
+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,
@@ -20637,7 +20672,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._-]+$/);
@@ -20659,14 +20694,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.2",
+  "version": "2.76.0",
   "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-09T19:26:19.202Z",
-  "sourceCommit": "7fb9064678498d4c0d4a0cc3926968d141a9f242",
+  "generatedAt": "2026-09-11T14:27:30.190Z",
+  "sourceCommit": "485a48a50395d09849d740a77ea76cbe502ba424",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/util/useMaskedInput.d.ts

@@ -10,6 +10,7 @@ interface UseMaskedInputOptions {
     mask: string;
     inPlace: boolean;
     data: unknown;
+    allowedKeys?: RegExp;
     onCommit: (stored: string) => void;
 }
 interface UseMaskedInputResult {
@@ -17,5 +18,5 @@ interface UseMaskedInputResult {
     handleChange: (detail: MaskChangeDetail) => void;
     handleKeyPress: (detail: MaskKeyPressDetail) => void;
 }
-export declare const useMaskedInput: ({ mask, inPlace, data, onCommit }: UseMaskedInputOptions) => UseMaskedInputResult;
+export declare const useMaskedInput: ({ mask, inPlace, data, allowedKeys, onCommit, }: UseMaskedInputOptions) => UseMaskedInputResult;
 export {};