@abgov/jsonforms-components 2.75.2 → 2.75.3

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%"
       })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.75.2",
+  "version": "2.75.3",
   "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-10T20:48:43.882Z",
+  "sourceCommit": "5a1d458e5df0177e45371e7770719fd29fb0b773",
   "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 {};