@abgov/jsonforms-components 2.75.0 → 2.75.1

package/index.esm.js

@@ -4928,20 +4928,49 @@ const computeMaskEdit = (rawValue, caretIndex, mask) => {
 const isMaskFilled = (value, mask) => value.replace(NON_CONTENT, '').length >= maskDigitCount(mask);
 // A human placeholder for a mask, e.g. '(###) ###-####' -> '(000) 000-0000'.
 const maskPlaceholder = mask => [...mask].map(char => isPlaceholder(char) ? '0' : char).join('');
-// Extracts the underlying input element from a GoA change/keypress detail, if available.
+// GoA retargets composed events to the host, so prefer the inner native input from the composed path.
 const getMaskInputTarget = detail => {
-  var _detail$event$target, _detail$event;
-  return (_detail$event$target = (_detail$event = detail.event) == null ? void 0 : _detail$event.target) != null ? _detail$event$target : undefined;
+  var _target$shadowRoot$qu, _target$shadowRoot;
+  const event = detail.event;
+  if (!event) {
+    return undefined;
+  }
+  const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+  const fromPath = path.find(node => node instanceof HTMLInputElement);
+  if (fromPath) {
+    return fromPath;
+  }
+  const target = event.target;
+  if (target instanceof HTMLInputElement) {
+    return target;
+  }
+  return (_target$shadowRoot$qu = target == null || (_target$shadowRoot = target.shadowRoot) == null ? void 0 : _target$shadowRoot.querySelector('input')) != null ? _target$shadowRoot$qu : undefined;
+};
+const applyMaskValue = (target, edit) => {
+  target.value = edit.display;
+  target.setSelectionRange == null || target.setSelectionRange(edit.caret, edit.caret);
 };
-// Applies an in-place edit to the DOM: forces the (fixed-length) value and restores the caret after React commits.
+// Applies an in-place edit to the inner input and re-applies after the web component paints.
 const applyInPlaceEdit = (target, edit) => {
   if (!target) {
     return;
   }
-  target.value = edit.display;
-  if (target.setSelectionRange) {
-    requestAnimationFrame(() => target.setSelectionRange == null ? void 0 : target.setSelectionRange(edit.caret, edit.caret));
+  applyMaskValue(target, edit);
+  requestAnimationFrame(() => applyMaskValue(target, edit));
+};
+// When the template is already filled, extra content characters must be rejected rather than shifting the value.
+const overflowMaskEdit = (previousDisplay, rawValue, caretIndex, mask) => {
+  if (!isMaskFilled(previousDisplay, mask)) {
+    return undefined;
+  }
+  if ((rawValue != null ? rawValue : '').replace(NON_CONTENT, '').length <= maskDigitCount(mask)) {
+    return undefined;
   }
+  return {
+    display: previousDisplay,
+    stored: formatWithPattern(previousDisplay, mask),
+    caret: Math.min(Math.max(caretIndex, 0), previousDisplay.length)
+  };
 };
 /**
  * Applies a mask template to a value, e.g. mask "(###) ###-####" turns "7801234567" into "(780) 123-4567".
@@ -10171,6 +10200,11 @@ const InnerGoAInputText = props => {
           var _target$selectionStar;
           const target = getMaskInputTarget(detail);
           const caretIndex = (_target$selectionStar = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar : cleaned.length;
+          const overflow = overflowMaskEdit(localValue, cleaned, caretIndex, mask);
+          if (overflow) {
+            applyInPlaceEdit(target, overflow);
+            return;
+          }
           const edit = computeMaskEdit(cleaned, caretIndex, mask);
           applyInPlaceEdit(target, edit);
           setLocalValue(edit.display);
@@ -10205,12 +10239,22 @@ const InnerGoAInputText = props => {
         });
       },
       onKeyPress: detail => {
+        const keyPressDetail = detail;
         const blockDisallowed = shouldBlockKey(detail.key, allowedKeys);
-        // In-place has no length cap, so also block content keys once the template is full.
+        // In-place has no maxLength, and GoA keyPress fires on keyup after the character is inserted.
         const blockOverflow = inPlace && !!mask && /^[A-Za-z0-9]$/.test(detail.key) && isMaskFilled(localValue, mask);
         if (blockDisallowed || blockOverflow) {
-          var _detail$event2;
-          (_detail$event2 = detail.event) == null || _detail$event2.preventDefault();
+          var _keyPressDetail$event;
+          (_keyPressDetail$event = keyPressDetail.event) == null || _keyPressDetail$event.preventDefault();
+        }
+        if (blockOverflow && mask) {
+          var _ref, _target$value, _target$selectionStar2;
+          const target = getMaskInputTarget(keyPressDetail);
+          const rawValue = (_ref = (_target$value = target == null ? void 0 : target.value) != null ? _target$value : detail.value) != null ? _ref : localValue;
+          const overflow = overflowMaskEdit(localValue, rawValue, (_target$selectionStar2 = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar2 : localValue.length, mask);
+          if (overflow) {
+            applyInPlaceEdit(target, overflow);
+          }
         }
       }
     }, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.componentProps))
@@ -13850,16 +13894,28 @@ const useMaskedInput = ({
     }
     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);
+    if (overflow) {
+      applyInPlaceEdit(target, overflow);
+      return;
+    }
     const edit = computeMaskEdit(rawValue, caretIndex, mask);
     applyInPlaceEdit(target, edit);
     setValue(edit.display);
     onCommit(edit.stored);
   };
-  // In-place mode has no native length cap, so block extra content characters at the source.
+  // In-place has no maxLength (the template is already full length) and GoA keyPress is keyup, so restore on overflow.
   const handleKeyPress = detail => {
-    if (inPlace && /^[A-Za-z0-9]$/.test(detail.key) && isMaskFilled(value, mask)) {
-      var _detail$event;
-      (_detail$event = detail.event) == null || _detail$event.preventDefault();
+    var _detail$event, _target$value, _target$selectionStar2;
+    if (!inPlace || !/^[A-Za-z0-9]$/.test(detail.key) || !isMaskFilled(value, mask)) {
+      return;
+    }
+    (_detail$event = detail.event) == null || _detail$event.preventDefault();
+    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);
+    if (overflow) {
+      applyInPlaceEdit(target, overflow);
     }
   };
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.75.0",
+  "version": "2.75.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-08T14:57:25.870Z",
-  "sourceCommit": "4bfd7a826d9a48271e8d7b7e77fbee5e560c102f",
+  "generatedAt": "2026-09-08T16:38:31.930Z",
+  "sourceCommit": "769e0871a07d4049577cd0a6f97d1dc56258481b",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

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

@@ -28,6 +28,7 @@ export declare const getMaskInputTarget: (detail: {
     event?: Event;
 }) => MaskInputTarget;
 export declare const applyInPlaceEdit: (target: MaskInputTarget, edit: MaskEdit) => void;
+export declare const overflowMaskEdit: (previousDisplay: string, rawValue: string, caretIndex: number, mask: string) => MaskEdit | undefined;
 /**
  * Applies a mask template to a value, e.g. mask "(###) ###-####" turns "7801234567" into "(780) 123-4567".
  * '#' consumes one content character from the input; every other character is a literal inserted into the output.