@abgov/jsonforms-components 2.75.0 → 2.75.2

package/index.esm.js

@@ -3902,6 +3902,38 @@ $$x({ target: 'Iterator', proto: true, real: true, forced: IS_PURE$2 }, {
   map: map
 });
 
+const sinTitle = 'Social insurance number';
+const invalidSin = 'Social insurance number is invalid';
+const DEFAULT_MAX_ITEMS = 50;
+const REQUIRED_PROPERTY_ERROR = 'is a required property';
+const ADDRESS_LOOKUP_LABELS = {
+  addressLine1: 'Address line 1',
+  addressLine2: 'Address line 2',
+  municipality: 'City',
+  postalCode: 'Postal code',
+  subdivisionCode: 'Province',
+  country: 'Country'
+};
+const VALIDATION_KEYWORDS = {
+  REQUIRED: 'required',
+  MIN_LENGTH: 'minLength',
+  MAX_LENGTH: 'maxLength',
+  FORMAT: 'format',
+  MINIMUM: 'minimum',
+  MAXIMUM: 'maximum',
+  TYPE: 'type',
+  ERROR_MESSAGE: 'errorMessage'
+};
+var StepStatus;
+(function (StepStatus) {
+  StepStatus["NOT_STARTED"] = "NotStarted";
+  StepStatus["IN_PROGRESS"] = "InProgress";
+  StepStatus["COMPLETED"] = "Completed";
+})(StepStatus || (StepStatus = {}));
+const getAddressLookupFieldLabel = fieldName => {
+  return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
+};
+
 var classof$5 = classofRaw$2;
 
 // `IsArray` abstract operation
@@ -4558,6 +4590,222 @@ const isRequiredBySchema = (rootSchema, rootData, path, options = {}) => {
   return reqSet.has(dotPath);
 };
 
+// Default formats keyed by type; the mask can be overridden per field via UI schema options.
+const DEFAULT_PATTERNS = {
+  phone: {
+    mask: '(###) ###-####',
+    pattern: /^\(?\d{3}\)?[- ]?\d{3}[- ]?\d{4}$/,
+    error: 'Must be a valid 10-digit phone number in format (000) 000-0000',
+    allowedKeys: /[0-9]/
+  },
+  sin: {
+    mask: '### ### ###',
+    pattern: /^\d{3} \d{3} \d{3}$/,
+    error: 'Must be a valid social insurance number in format 000 000 000',
+    allowedKeys: /[0-9]/
+  },
+  postalCode: {
+    mask: '### ###',
+    pattern: /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/,
+    error: 'Must be in A0A 0A0 capital letters and numbers format',
+    allowedKeys: /[A-Za-z0-9]/
+  },
+  driverId: {
+    // Alberta driver's licence: six digits, a dash, then three digits.
+    mask: '######-###',
+    pattern: /^\d{6}-\d{3}$/,
+    error: "Must be a valid driver's licence number in format 000000-000",
+    allowedKeys: /[0-9]/
+  },
+  mvid: {
+    // Motor vehicle ID: four digits, a dash, then five digits.
+    mask: '####-#####',
+    pattern: /^\d{4}-\d{5}$/,
+    error: 'Must be a valid motor vehicle ID in format 0000-00000',
+    allowedKeys: /[0-9]/
+  }
+};
+// Resolve the mask format for a field: schema.format must match a DEFAULT_PATTERNS key.
+const resolveFormatConfig = schema => {
+  if (!schema) {
+    return undefined;
+  }
+  if (schema.format && schema.format in DEFAULT_PATTERNS) {
+    return DEFAULT_PATTERNS[schema.format];
+  }
+  return schema.title === sinTitle ? DEFAULT_PATTERNS.sin : undefined;
+};
+const getSchemaErrorMessage = errorMessage => {
+  if (typeof errorMessage === 'string' && errorMessage.trim() !== '') {
+    return errorMessage;
+  }
+  if (errorMessage && typeof errorMessage === 'object') {
+    const configured = errorMessage.pattern || errorMessage.format;
+    if (typeof configured === 'string' && configured.trim() !== '') {
+      return configured;
+    }
+  }
+  return undefined;
+};
+// Prefer a schema or format-config error; callers fall back to AJV when this is empty.
+const getConfiguredFormatError = schema => {
+  var _resolveFormatConfig;
+  return getSchemaErrorMessage(schema == null ? void 0 : schema.errorMessage) || ((_resolveFormatConfig = resolveFormatConfig(schema)) == null ? void 0 : _resolveFormatConfig.error);
+};
+// Mask placeholder characters; each consumes one input character. Any other mask character is treated as a literal.
+const MASK_PLACEHOLDERS = new Set(['#', '*', '_']);
+const isPlaceholder = char => MASK_PLACEHOLDERS.has(char);
+// Navigation/editing keys that keystroke filtering must always let through.
+const MASK_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
+// A single-character key should be blocked when the format restricts input and the key isn't allowed.
+const shouldBlockKey = (key, allowedKeys) => !!allowedKeys && key.length === 1 && !MASK_CONTROL_KEYS.has(key) && !allowedKeys.test(key);
+// Removes characters the format doesn't allow (e.g. letters from a digit-only field), for paste/programmatic input.
+const filterAllowedKeys = (value, allowedKeys) => allowedKeys ? [...(value != null ? value : '')].filter(char => allowedKeys.test(char)).join('') : value != null ? value : '';
+// A mask slot holds one content character (letter or digit); everything else in the value is a separator.
+const NON_CONTENT = /[^a-zA-Z0-9]/g;
+const IS_CONTENT = /[a-zA-Z0-9]/;
+// Number of fill slots in a mask (its placeholder characters).
+const maskDigitCount = mask => [...mask].filter(isPlaceholder).length;
+// Formats a value into a placeholder mask (e.g. '(###) ###-####'), filling only the content entered so far.
+// Placeholder characters consume one content character each; every other mask character is a literal.
+const formatWithPattern = (value, mask) => {
+  const maxContent = maskDigitCount(mask);
+  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
+  let index = 0;
+  let formatted = '';
+  for (const maskChar of mask) {
+    if (index >= content.length) {
+      break;
+    }
+    formatted += isPlaceholder(maskChar) ? content[index++] : maskChar;
+  }
+  return formatted;
+};
+// Fills the mask with the value's content, leaving the placeholder character for positions not yet entered.
+const toMaskTemplate = (value, mask) => {
+  const maxContent = maskDigitCount(mask);
+  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
+  let index = 0;
+  let display = '';
+  for (const maskChar of mask) {
+    display += isPlaceholder(maskChar) ? index < content.length ? content[index++] : maskChar : maskChar;
+  }
+  return display;
+};
+// Caret position just after the Nth content character within a rendered mask, so in-place edits keep the cursor in place.
+const caretAfterDigits = (display, digitCount) => {
+  if (digitCount <= 0) {
+    return 0;
+  }
+  let seen = 0;
+  for (let i = 0; i < display.length; i++) {
+    if (IS_CONTENT.test(display[i])) {
+      seen += 1;
+      if (seen === digitCount) {
+        return i + 1;
+      }
+    }
+  }
+  return display.length;
+};
+// Computes an in-place masked edit from the raw input and caret index: what to show, what to store, where to put the caret.
+const computeMaskEdit = (rawValue, caretIndex, mask) => {
+  const digitsBeforeCaret = rawValue.slice(0, caretIndex).replace(NON_CONTENT, '').length;
+  const display = toMaskTemplate(rawValue, mask);
+  const stored = formatWithPattern(rawValue, mask);
+  const caret = caretAfterDigits(display, Math.min(digitsBeforeCaret, maskDigitCount(mask)));
+  return {
+    display,
+    stored,
+    caret
+  };
+};
+// True once the value has as many content characters as the mask has fill slots.
+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('');
+// GoA retargets composed events to the host, so prefer the inner native input from the composed path.
+const getMaskInputTarget = detail => {
+  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 inner input and re-applies after the web component paints.
+const applyInPlaceEdit = (target, edit) => {
+  if (!target) {
+    return;
+  }
+  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".
+ * '#' consumes one content character from the input; every other character is a literal inserted into the output.
+ * The mask's literal characters are stripped from the input first so an already formatted value re-formats cleanly.
+ * Returns the original value unchanged when the mask is empty or no content characters remain.
+ * @param value - The raw input value
+ * @param mask - The mask template string
+ * @returns The masked value
+ */
+const applyFormatPattern = (value, mask) => {
+  if (!mask || !value) {
+    return value;
+  }
+  const literals = new Set(mask.split('').filter(char => !isPlaceholder(char)));
+  const content = value.split('').filter(char => !literals.has(char));
+  if (content.length === 0) {
+    return value;
+  }
+  let contentIndex = 0;
+  let result = '';
+  for (const maskChar of mask) {
+    if (contentIndex >= content.length) {
+      break;
+    }
+    if (isPlaceholder(maskChar)) {
+      result += content[contentIndex];
+      contentIndex += 1;
+    } else {
+      result += maskChar;
+    }
+  }
+  // Append any remaining content characters that did not fit the mask.
+  if (contentIndex < content.length) {
+    result += content.slice(contentIndex).join('');
+  }
+  return result;
+};
+
 /**
  * Sets the first word to be capitalized so that it is sentence cased.
  * @param words
@@ -4755,7 +5003,10 @@ const checkFieldValidity = (props, rootData) => {
   if (isRegisterBackedEnum) {
     return '';
   }
-  return ajvErrors;
+  if (!ajvErrors || ajvErrors === invalidSin) {
+    return ajvErrors;
+  }
+  return getConfiguredFormatError(schema) || ajvErrors;
 };
 /**
  * Check if the date is a valid date/time
@@ -4821,166 +5072,6 @@ const UTCToFullLocalTime = (fullTime, useUTC = false) => {
   }).replace('p.m.', 'PM').replace('a.m.', 'AM');
 };
 
-// Default formats keyed by type; the mask can be overridden per field via UI schema options.
-const DEFAULT_PATTERNS = {
-  phone: {
-    mask: '(###) ###-####',
-    pattern: /^\(?\d{3}\)?[- ]?\d{3}[- ]?\d{4}$/,
-    error: 'Must be a valid 10-digit phone number in format (000) 000-0000',
-    allowedKeys: /[0-9]/
-  },
-  sin: {
-    mask: '### ### ###',
-    pattern: /^\d{3} \d{3} \d{3}$/,
-    error: 'Must be three groups of three digits.',
-    allowedKeys: /[0-9]/
-  },
-  postalCode: {
-    mask: '### ###',
-    pattern: /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/,
-    error: 'Must be in A0A 0A0 capital letters and numbers format',
-    allowedKeys: /[A-Za-z0-9]/
-  },
-  driverId: {
-    // Alberta driver's licence: six digits, a dash, then three digits.
-    mask: '######-###',
-    pattern: /^\d{6}-\d{3}$/,
-    error: "Must be a valid driver's licence number in format 000000-000",
-    allowedKeys: /[0-9]/
-  },
-  mvid: {
-    // Motor vehicle ID: four digits, a dash, then five digits.
-    mask: '####-#####',
-    pattern: /^\d{4}-\d{5}$/,
-    error: 'Must be a valid motor vehicle ID in format 0000-00000',
-    allowedKeys: /[0-9]/
-  }
-};
-// Mask placeholder characters; each consumes one input character. Any other mask character is treated as a literal.
-const MASK_PLACEHOLDERS = new Set(['#', '*', '_']);
-const isPlaceholder = char => MASK_PLACEHOLDERS.has(char);
-// Navigation/editing keys that keystroke filtering must always let through.
-const MASK_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
-// A single-character key should be blocked when the format restricts input and the key isn't allowed.
-const shouldBlockKey = (key, allowedKeys) => !!allowedKeys && key.length === 1 && !MASK_CONTROL_KEYS.has(key) && !allowedKeys.test(key);
-// Removes characters the format doesn't allow (e.g. letters from a digit-only field), for paste/programmatic input.
-const filterAllowedKeys = (value, allowedKeys) => allowedKeys ? [...(value != null ? value : '')].filter(char => allowedKeys.test(char)).join('') : value != null ? value : '';
-// A mask slot holds one content character (letter or digit); everything else in the value is a separator.
-const NON_CONTENT = /[^a-zA-Z0-9]/g;
-const IS_CONTENT = /[a-zA-Z0-9]/;
-// Number of fill slots in a mask (its placeholder characters).
-const maskDigitCount = mask => [...mask].filter(isPlaceholder).length;
-// Formats a value into a placeholder mask (e.g. '(###) ###-####'), filling only the content entered so far.
-// Placeholder characters consume one content character each; every other mask character is a literal.
-const formatWithPattern = (value, mask) => {
-  const maxContent = maskDigitCount(mask);
-  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
-  let index = 0;
-  let formatted = '';
-  for (const maskChar of mask) {
-    if (index >= content.length) {
-      break;
-    }
-    formatted += isPlaceholder(maskChar) ? content[index++] : maskChar;
-  }
-  return formatted;
-};
-// Fills the mask with the value's content, leaving the placeholder character for positions not yet entered.
-const toMaskTemplate = (value, mask) => {
-  const maxContent = maskDigitCount(mask);
-  const content = (value != null ? value : '').replace(NON_CONTENT, '').slice(0, maxContent);
-  let index = 0;
-  let display = '';
-  for (const maskChar of mask) {
-    display += isPlaceholder(maskChar) ? index < content.length ? content[index++] : maskChar : maskChar;
-  }
-  return display;
-};
-// Caret position just after the Nth content character within a rendered mask, so in-place edits keep the cursor in place.
-const caretAfterDigits = (display, digitCount) => {
-  if (digitCount <= 0) {
-    return 0;
-  }
-  let seen = 0;
-  for (let i = 0; i < display.length; i++) {
-    if (IS_CONTENT.test(display[i])) {
-      seen += 1;
-      if (seen === digitCount) {
-        return i + 1;
-      }
-    }
-  }
-  return display.length;
-};
-// Computes an in-place masked edit from the raw input and caret index: what to show, what to store, where to put the caret.
-const computeMaskEdit = (rawValue, caretIndex, mask) => {
-  const digitsBeforeCaret = rawValue.slice(0, caretIndex).replace(NON_CONTENT, '').length;
-  const display = toMaskTemplate(rawValue, mask);
-  const stored = formatWithPattern(rawValue, mask);
-  const caret = caretAfterDigits(display, Math.min(digitsBeforeCaret, maskDigitCount(mask)));
-  return {
-    display,
-    stored,
-    caret
-  };
-};
-// True once the value has as many content characters as the mask has fill slots.
-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.
-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;
-};
-// Applies an in-place edit to the DOM: forces the (fixed-length) value and restores the caret after React commits.
-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));
-  }
-};
-/**
- * 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.
- * The mask's literal characters are stripped from the input first so an already formatted value re-formats cleanly.
- * Returns the original value unchanged when the mask is empty or no content characters remain.
- * @param value - The raw input value
- * @param mask - The mask template string
- * @returns The masked value
- */
-const applyFormatPattern = (value, mask) => {
-  if (!mask || !value) {
-    return value;
-  }
-  const literals = new Set(mask.split('').filter(char => !isPlaceholder(char)));
-  const content = value.split('').filter(char => !literals.has(char));
-  if (content.length === 0) {
-    return value;
-  }
-  let contentIndex = 0;
-  let result = '';
-  for (const maskChar of mask) {
-    if (contentIndex >= content.length) {
-      break;
-    }
-    if (isPlaceholder(maskChar)) {
-      result += content[contentIndex];
-      contentIndex += 1;
-    } else {
-      result += maskChar;
-    }
-  }
-  // Append any remaining content characters that did not fit the mask.
-  if (contentIndex < content.length) {
-    result += content.slice(contentIndex).join('');
-  }
-  return result;
-};
-
 /**
  * Checks input controls data value to determine is required and has any data.
  * @param props - The JsonForm control props
@@ -7573,38 +7664,6 @@ function buildConditionalDeps(rootSchema) {
   return out;
 }
 
-const sinTitle = 'Social insurance number';
-const invalidSin = 'Social insurance number is invalid';
-const DEFAULT_MAX_ITEMS = 50;
-const REQUIRED_PROPERTY_ERROR = 'is a required property';
-const ADDRESS_LOOKUP_LABELS = {
-  addressLine1: 'Address line 1',
-  addressLine2: 'Address line 2',
-  municipality: 'City',
-  postalCode: 'Postal code',
-  subdivisionCode: 'Province',
-  country: 'Country'
-};
-const VALIDATION_KEYWORDS = {
-  REQUIRED: 'required',
-  MIN_LENGTH: 'minLength',
-  MAX_LENGTH: 'maxLength',
-  FORMAT: 'format',
-  MINIMUM: 'minimum',
-  MAXIMUM: 'maximum',
-  TYPE: 'type',
-  ERROR_MESSAGE: 'errorMessage'
-};
-var StepStatus;
-(function (StepStatus) {
-  StepStatus["NOT_STARTED"] = "NotStarted";
-  StepStatus["IN_PROGRESS"] = "InProgress";
-  StepStatus["COMPLETED"] = "Completed";
-})(StepStatus || (StepStatus = {}));
-const getAddressLookupFieldLabel = fieldName => {
-  return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function hasMeaningfulValue(val) {
   if (val === undefined || val === null) return false;
@@ -10007,13 +10066,6 @@ const resetInputValue = (detail, value) => {
     target.value = value;
   }
 };
-// Resolve the mask format for a field: schema.format must match a DEFAULT_PATTERNS key.
-const resolveFormatConfig = schema => {
-  if (schema.format && schema.format in DEFAULT_PATTERNS) {
-    return DEFAULT_PATTERNS[schema.format];
-  }
-  return schema.title === sinTitle ? DEFAULT_PATTERNS.sin : undefined;
-};
 const GoAInputText = props => {
   return jsxs(JsonFormRegisterProvider, {
     defaultRegisters: undefined,
@@ -10171,6 +10223,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 +10262,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 +13917,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.2",
   "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-09T19:26:19.202Z",
+  "sourceCommit": "7fb9064678498d4c0d4a0cc3926968d141a9f242",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

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

@@ -5,6 +5,20 @@ export interface MaskPattern {
     allowedKeys?: RegExp;
 }
 export declare const DEFAULT_PATTERNS: Record<string, MaskPattern>;
+export declare const resolveFormatConfig: (schema?: {
+    format?: string;
+    title?: string;
+}) => MaskPattern | undefined;
+type SchemaErrorMessage = string | {
+    pattern?: string;
+    format?: string;
+};
+type FormatSchema = {
+    format?: string;
+    title?: string;
+    errorMessage?: SchemaErrorMessage;
+};
+export declare const getConfiguredFormatError: (schema?: FormatSchema) => string | undefined;
 export declare const MASK_PLACEHOLDERS: Set<string>;
 export declare const MASK_CONTROL_KEYS: Set<string>;
 export declare const shouldBlockKey: (key: string, allowedKeys?: RegExp) => boolean;
@@ -28,6 +42,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.