@abgov/jsonforms-components 2.74.0 → 2.75.0

package/index.esm.js

@@ -4821,6 +4821,166 @@ 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
@@ -8325,6 +8485,12 @@ const createAutoPopulateMiddleware = (uischema, user) => (state, action, default
  */
 const autoPopulatePropertiesMonaco = [];
 
+// clean-code-ignore: RULE-19 — see the file-header note; ./context.spec.tsx covers this.
+// A shared empty default: a fresh [] on every render would read as a change and hand consumers a
+// new context value for nothing.
+const NO_AUTO_POPULATED_DATA = [];
+// The props a host can change after mount. See the note where they are applied.
+const HOST_CONTROLLED_KEYS = ['formUrl', 'isFormSubmitted', 'showChangeButtons', 'autoPopulatedData', 'formId', 'navigationTarget', 'onNavigationChange'];
 class ContextProviderClass {
   async addDataByUrl(key, url, processDataFunction, token) {
     let header = {};
@@ -8393,15 +8559,25 @@ class ContextProviderClass {
       if (!props.children) {
         return null;
       }
-      if (props.formUrl) {
-        this.baseEnumerator.formUrl = props.formUrl;
+      // Everything below is a value a host can change while the form is mounted, so it is applied by
+      // replacing the enumerator rather than by writing into it. The consumers all sit behind
+      // JsonForms' memoised renderers, which re-render only when the form's own state changes — React
+      // reaches past that memoisation for a context consumer, but only when the provider's value is a
+      // different object. Mutating the enumerator in place left every one of these stale until
+      // something else happened to re-render the form: a navigation target a host set on a Change
+      // click was simply never seen.
+      const next = Object.assign({}, this.baseEnumerator, {
+        formUrl: props.formUrl || this.baseEnumerator.formUrl,
+        isFormSubmitted: (_props$isFormSubmitte = props.isFormSubmitted) != null ? _props$isFormSubmitte : false,
+        showChangeButtons: (_props$showChangeButt = props.showChangeButtons) != null ? _props$showChangeButt : true,
+        autoPopulatedData: (_props$autoPopulatedD = props.autoPopulatedData) != null ? _props$autoPopulatedD : NO_AUTO_POPULATED_DATA,
+        formId: props.formId,
+        navigationTarget: props.navigationTarget,
+        onNavigationChange: props.onNavigationChange
+      });
+      if (HOST_CONTROLLED_KEYS.some(key => next[key] !== this.baseEnumerator[key])) {
+        this.baseEnumerator = next;
       }
-      this.baseEnumerator.isFormSubmitted = (_props$isFormSubmitte = props.isFormSubmitted) != null ? _props$isFormSubmitte : false;
-      this.baseEnumerator.showChangeButtons = (_props$showChangeButt = props.showChangeButtons) != null ? _props$showChangeButt : true;
-      this.baseEnumerator.autoPopulatedData = (_props$autoPopulatedD = props.autoPopulatedData) != null ? _props$autoPopulatedD : [];
-      this.baseEnumerator.formId = props.formId;
-      this.baseEnumerator.navigationTarget = props.navigationTarget;
-      this.baseEnumerator.onNavigationChange = props.onNavigationChange;
       return jsx(JsonFormContext.Provider, {
         value: this.baseEnumerator,
         children: (_this$selfProps = this.selfProps) == null ? void 0 : _this$selfProps.children
@@ -9794,54 +9970,6 @@ if (DESCRIPTORS$1 && isCallable(NativeSymbol) && (!('description' in SymbolProto
   });
 }
 
-var call$2 = functionCall;
-var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
-var anObject = anObject$t;
-var isNullOrUndefined = isNullOrUndefined$7;
-var toLength$2 = toLength$7;
-var toString$5 = toString$n;
-var requireObjectCoercible$3 = requireObjectCoercible$e;
-var getMethod = getMethod$7;
-var advanceStringIndex = advanceStringIndex$3;
-var regExpExec = regexpExecAbstract;
-
-// @@match logic
-fixRegExpWellKnownSymbolLogic('match', function (MATCH, nativeMatch, maybeCallNative) {
-  return [
-    // `String.prototype.match` method
-    // https://tc39.es/ecma262/#sec-string.prototype.match
-    function match(regexp) {
-      var O = requireObjectCoercible$3(this);
-      var matcher = isNullOrUndefined(regexp) ? undefined : getMethod(regexp, MATCH);
-      return matcher ? call$2(matcher, regexp, O) : new RegExp(regexp)[MATCH](toString$5(O));
-    },
-    // `RegExp.prototype[@@match]` method
-    // https://tc39.es/ecma262/#sec-regexp.prototype-@@match
-    function (string) {
-      var rx = anObject(this);
-      var S = toString$5(string);
-      var res = maybeCallNative(nativeMatch, rx, S);
-
-      if (res.done) return res.value;
-
-      if (!rx.global) return regExpExec(rx, S);
-
-      var fullUnicode = rx.unicode;
-      rx.lastIndex = 0;
-      var A = [];
-      var n = 0;
-      var result;
-      while ((result = regExpExec(rx, S)) !== null) {
-        var matchStr = toString$5(result[0]);
-        A[n] = matchStr;
-        if (matchStr === '') rx.lastIndex = advanceStringIndex(S, toLength$2(rx.lastIndex), fullUnicode);
-        n++;
-      }
-      return n === 0 ? null : A;
-    }
-  ];
-});
-
 //type DebounceValueType = string | boolean | number | Record<string, unknown>;
 /**
  * A helper util to return a value at a certain delay. The delay is reset if the value arg changes
@@ -9872,23 +10000,6 @@ function fetchRegisterConfigFromOptions$1(options) {
   const config = Object.assign({}, options);
   return config;
 }
-const formattedSinPattern = /^\d{3}-\d{3}-\d{3}$/;
-const allowedSinInputPattern = /^[\d-]*$/;
-const allowedSinKeyPattern = /^[\d-]$/;
-const allowedSinControlKeys = new Set(['Backspace', 'Delete', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
-const formatSinForDisplay = value => value.replace(/ /g, '-');
-const formatSinForSchema = value => value.replace(/-/g, ' ');
-const formatSin = value => {
-  var _digits$match$join, _digits$match;
-  if (!allowedSinInputPattern.test(value)) {
-    return '';
-  }
-  if (formattedSinPattern.test(value)) {
-    return value;
-  }
-  const digits = value == null ? void 0 : value.replace(/\D/g, '').slice(0, 9);
-  return (_digits$match$join = digits == null || (_digits$match = digits.match(/.{1,3}/g)) == null ? void 0 : _digits$match.join('-')) != null ? _digits$match$join : '';
-};
 const resetInputValue = (detail, value) => {
   var _detail$event;
   const target = (_detail$event = detail.event) == null ? void 0 : _detail$event.target;
@@ -9896,6 +10007,13 @@ 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,
@@ -9903,7 +10021,7 @@ const GoAInputText = props => {
   });
 };
 const InnerGoAInputText = props => {
-  var _uischema$options$com, _uischema$options, _props$uischema, _uischema$options2, _uischema$options3, _uischema$options$pla, _uischema$options4, _props$uischema2, _uischema$options5, _uischema$options6, _uischema$options$com2, _uischema$options7, _uischema$options8, _uischema$options9;
+  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;
   const {
     data,
     config,
@@ -9918,18 +10036,37 @@ const InnerGoAInputText = props => {
     isVisited,
     setIsVisited
   } = props;
-  const isSinField = schema.title === sinTitle;
-  const initialValue = isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data;
+  // 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 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;
+    }
+    const str = typeof value === 'string' ? value : '';
+    return inPlace ? toMaskTemplate(str, mask) : formatWithPattern(str, mask);
+  };
   const [manualInput, setManualInput] = useState(false);
-  const [localValue, setLocalValue] = useState(initialValue);
+  // In-place mounts empty then sets the template so the web component reflects it (a value change forces the paint).
+  const [localValue, setLocalValue] = useState(inPlace ? '' : toDisplay(data));
+  useEffect(() => {
+    if (inPlace) {
+      setLocalValue(toDisplay(data));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const debouncedValue = useDebounce(localValue, 300);
   const hasDefault = Object.prototype.hasOwnProperty.call(schema, 'default');
   useEffect(() => {
     if (data === undefined || data === null) {
       return;
     }
-    setLocalValue(isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data);
-  }, [data, isSinField]);
+    setLocalValue(toDisplay(data));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, mask]);
   useEffect(() => {
     if (typeof handleChange === 'function' && hasDefault && data === undefined && !manualInput) {
       handleChange(props.path, schema.default);
@@ -9939,17 +10076,19 @@ const InnerGoAInputText = props => {
   }, [schema.default, data]);
   /* istanbul ignore next */
   useEffect(() => {
-    const dataForInput = isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data;
+    const dataForInput = toDisplay(data);
     if (debouncedValue === dataForInput) return;
     // Only sync if debouncedValue differs from data and is not initial empty state
     if (debouncedValue !== dataForInput && (debouncedValue !== '' || data !== undefined)) {
       onChangeForInputControl({
-        value: isSinField ? formatSinForSchema(debouncedValue) : debouncedValue,
+        // Normalize to the clean value; for in-place this drops the unfilled template characters.
+        value: mask ? formatWithPattern(debouncedValue, mask) : debouncedValue,
         controlProps: props
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
-  const width = (_uischema$options$com = uischema == null || (_uischema$options = uischema.options) == null || (_uischema$options = _uischema$options.componentProps) == null ? void 0 : _uischema$options.width) != null ? _uischema$options$com : '100%';
+  const width = (_uischema$options$com = uischema == null || (_uischema$options3 = uischema.options) == null || (_uischema$options3 = _uischema$options3.componentProps) == null ? void 0 : _uischema$options3.width) != null ? _uischema$options$com : '100%';
   const registerCtx = useContext(JsonFormsRegisterContext);
   const registerConfig = fetchRegisterConfigFromOptions$1((_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.register);
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -9957,9 +10096,9 @@ const InnerGoAInputText = props => {
   if (registerConfig) {
     registerData = registerCtx == null ? void 0 : registerCtx.selectRegisterData(registerConfig);
   }
-  const labelPath = (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.label) || 'label';
-  const valuePath = (uischema == null || (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.value) || 'value';
-  const dropDownPlaceholder = (_uischema$options$pla = uischema == null || (_uischema$options4 = uischema.options) == null ? void 0 : _uischema$options4.placeholder) != null ? _uischema$options$pla : 'Select an option';
+  const labelPath = (uischema == null || (_uischema$options4 = uischema.options) == null ? void 0 : _uischema$options4.label) || 'label';
+  const valuePath = (uischema == null || (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.value) || 'value';
+  const dropDownPlaceholder = (_uischema$options$pla = uischema == null || (_uischema$options6 = uischema.options) == null ? void 0 : _uischema$options6.placeholder) != null ? _uischema$options$pla : 'Select an option';
   const autoCompletion = ((_props$uischema2 = props.uischema) == null || (_props$uischema2 = _props$uischema2.options) == null ? void 0 : _props$uischema2.autoComplete) === true;
   const mergedOptions = useMemo(() => {
     var _registerData;
@@ -9996,32 +10135,10 @@ const InnerGoAInputText = props => {
   }, [registerCtx, registerConfig]);
   const appliedUiSchemaOptions = Object.assign({}, config, uischema == null ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.placeholder) || (schema == null ? void 0 : schema.description) || '';
-  const autoCapitalize = (uischema == null || (_uischema$options5 = uischema.options) == null || (_uischema$options5 = _uischema$options5.componentProps) == null ? void 0 : _uischema$options5.autoCapitalize) === true || (uischema == null || (_uischema$options6 = uischema.options) == null ? void 0 : _uischema$options6.autoCapitalize) === true;
-  const readOnly = (_uischema$options$com2 = uischema == null || (_uischema$options7 = uischema.options) == null || (_uischema$options7 = _uischema$options7.componentProps) == null ? void 0 : _uischema$options7.readOnly) != null ? _uischema$options$com2 : false;
-  const preventInvalidSinKey = event => {
-    if (!isSinField || allowedSinControlKeys.has(event.key) || event.metaKey || event.ctrlKey || event.altKey || allowedSinKeyPattern.test(event.key)) {
-      return;
-    }
-    event.preventDefault();
-  };
-  const preventInvalidSinBeforeInput = event => {
-    if (!isSinField) {
-      return;
-    }
-    const data = event.nativeEvent.data;
-    if (data && !allowedSinInputPattern.test(data)) {
-      event.preventDefault();
-    }
-  };
-  const preventInvalidSinPaste = event => {
-    if (isSinField && !allowedSinInputPattern.test(event.clipboardData.getData('text'))) {
-      event.preventDefault();
-    }
-  };
+  const autoCapitalize = (uischema == null || (_uischema$options7 = uischema.options) == null || (_uischema$options7 = _uischema$options7.componentProps) == null ? void 0 : _uischema$options7.autoCapitalize) === true || (uischema == null || (_uischema$options8 = uischema.options) == null ? void 0 : _uischema$options8.autoCapitalize) === true;
+  const readOnly = (_uischema$options$com2 = uischema == null || (_uischema$options9 = uischema.options) == null || (_uischema$options9 = _uischema$options9.componentProps) == null ? void 0 : _uischema$options9.readOnly) != null ? _uischema$options$com2 : false;
+  const formatPattern = uischema == null || (_uischema$options0 = uischema.options) == null ? void 0 : _uischema$options0.formatPattern;
   return jsx("div", {
-    onKeyDownCapture: preventInvalidSinKey,
-    onBeforeInputCapture: preventInvalidSinBeforeInput,
-    onPasteCapture: preventInvalidSinPaste,
     children: mergedOptions.length > 1 ? jsx(GoabDropdown, {
       name: `jsonforms-${path}-dropdown`,
       value: data,
@@ -10042,22 +10159,29 @@ const InnerGoAInputText = props => {
       value: localValue,
       width: width,
       readonly: readOnly,
-      maxLength: isSinField ? 11 : undefined,
-      placeholder: placeholder,
+      maxLength: inPlace ? undefined : mask ? mask.length : undefined,
+      placeholder: inPlace ? undefined : mask ? maskPlaceholder(mask) : placeholder,
       name: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
       ariaLabel: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
       testId: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`
-    }, (_uischema$options8 = uischema.options) == null ? void 0 : _uischema$options8.componentProps, {
+    }, (_uischema$options1 = uischema.options) == null ? void 0 : _uischema$options1.componentProps, {
       onChange: detail => {
-        let formattedValue = detail.value;
-        if (isSinField && !allowedSinInputPattern.test(detail.value)) {
-          resetInputValue(detail, localValue);
-          return;
-        }
-        if (isSinField && detail.value !== '') {
-          formattedValue = formatSin(detail.value);
+        const cleaned = allowedKeys ? filterAllowedKeys(detail.value, allowedKeys) : detail.value;
+        if (inPlace && mask) {
+          var _target$selectionStar;
+          const target = getMaskInputTarget(detail);
+          const caretIndex = (_target$selectionStar = target == null ? void 0 : target.selectionStart) != null ? _target$selectionStar : cleaned.length;
+          const edit = computeMaskEdit(cleaned, caretIndex, mask);
+          applyInPlaceEdit(target, edit);
+          setLocalValue(edit.display);
+        } else {
+          const formattedValue = mask && cleaned !== '' ? formatWithPattern(cleaned, mask) : cleaned;
+          // If characters were rejected, force the input to show the cleaned value.
+          if (allowedKeys && cleaned !== detail.value) {
+            resetInputValue(detail, formattedValue);
+          }
+          setLocalValue(formattedValue);
         }
-        setLocalValue(formattedValue);
         setManualInput(true);
         if (isVisited === false && setIsVisited) {
           setIsVisited();
@@ -10067,19 +10191,29 @@ const InnerGoAInputText = props => {
         if (isVisited === false && setIsVisited) {
           setIsVisited();
         }
+        const capitalizedValue = autoCapitalize ? detail.value.toUpperCase() : detail.value;
+        if (formatPattern) {
+          const formattedValue = applyFormatPattern(capitalizedValue, formatPattern);
+          setLocalValue(formattedValue);
+          handleChange(path, formattedValue);
+          return;
+        }
         onBlurForTextControl({
           name: detail.name,
           controlProps: props,
-          value: autoCapitalize ? detail.value.toUpperCase() : detail.value
+          value: capitalizedValue
         });
       },
       onKeyPress: detail => {
-        if (isSinField && detail.key && !allowedSinKeyPattern.test(detail.key)) {
+        const blockDisallowed = shouldBlockKey(detail.key, allowedKeys);
+        // In-place has no length cap, so also block content keys once the template is full.
+        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();
         }
       }
-    }, uischema == null || (_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.componentProps))
+    }, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.componentProps))
   });
 };
 const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -10238,15 +10372,15 @@ function _objectWithoutPropertiesLoose(r, e) {
 }
 
 var toIntegerOrInfinity$1 = toIntegerOrInfinity$9;
-var toString$4 = toString$n;
-var requireObjectCoercible$2 = requireObjectCoercible$e;
+var toString$5 = toString$n;
+var requireObjectCoercible$3 = requireObjectCoercible$e;
 
 var $RangeError$1 = RangeError;
 
 // `String.prototype.repeat` method implementation
 // https://tc39.es/ecma262/#sec-string.prototype.repeat
 var stringRepeat = function repeat(count) {
-  var str = toString$4(requireObjectCoercible$2(this));
+  var str = toString$5(requireObjectCoercible$3(this));
   var result = '';
   var n = toIntegerOrInfinity$1(count);
   if (n < 0 || n === Infinity) throw new $RangeError$1('Wrong number of repetitions');
@@ -10256,10 +10390,10 @@ var stringRepeat = function repeat(count) {
 
 // https://github.com/tc39/proposal-string-pad-start-end
 var uncurryThis$4 = functionUncurryThis;
-var toLength$1 = toLength$7;
-var toString$3 = toString$n;
+var toLength$2 = toLength$7;
+var toString$4 = toString$n;
 var $repeat = stringRepeat;
-var requireObjectCoercible$1 = requireObjectCoercible$e;
+var requireObjectCoercible$2 = requireObjectCoercible$e;
 
 var repeat = uncurryThis$4($repeat);
 var stringSlice$1 = uncurryThis$4(''.slice);
@@ -10268,10 +10402,10 @@ var ceil = Math.ceil;
 // `String.prototype.{ padStart, padEnd }` methods implementation
 var createMethod = function (IS_END) {
   return function ($this, maxLength, fillString) {
-    var S = toString$3(requireObjectCoercible$1($this));
-    var intMaxLength = toLength$1(maxLength);
+    var S = toString$4(requireObjectCoercible$2($this));
+    var intMaxLength = toLength$2(maxLength);
     var stringLength = S.length;
-    var fillStr = fillString === undefined ? ' ' : toString$3(fillString);
+    var fillStr = fillString === undefined ? ' ' : toString$4(fillString);
     var fillLen, stringFiller;
     if (intMaxLength <= stringLength || fillStr === '') return S;
     fillLen = intMaxLength - stringLength;
@@ -11315,6 +11449,54 @@ const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, pr
 }));
 const GoAInputBaseReviewControl = withJsonFormsControlProps(GoInputBaseReview);
 
+var call$2 = functionCall;
+var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
+var anObject = anObject$t;
+var isNullOrUndefined = isNullOrUndefined$7;
+var toLength$1 = toLength$7;
+var toString$3 = toString$n;
+var requireObjectCoercible$1 = requireObjectCoercible$e;
+var getMethod = getMethod$7;
+var advanceStringIndex = advanceStringIndex$3;
+var regExpExec = regexpExecAbstract;
+
+// @@match logic
+fixRegExpWellKnownSymbolLogic('match', function (MATCH, nativeMatch, maybeCallNative) {
+  return [
+    // `String.prototype.match` method
+    // https://tc39.es/ecma262/#sec-string.prototype.match
+    function match(regexp) {
+      var O = requireObjectCoercible$1(this);
+      var matcher = isNullOrUndefined(regexp) ? undefined : getMethod(regexp, MATCH);
+      return matcher ? call$2(matcher, regexp, O) : new RegExp(regexp)[MATCH](toString$3(O));
+    },
+    // `RegExp.prototype[@@match]` method
+    // https://tc39.es/ecma262/#sec-regexp.prototype-@@match
+    function (string) {
+      var rx = anObject(this);
+      var S = toString$3(string);
+      var res = maybeCallNative(nativeMatch, rx, S);
+
+      if (res.done) return res.value;
+
+      if (!rx.global) return regExpExec(rx, S);
+
+      var fullUnicode = rx.unicode;
+      rx.lastIndex = 0;
+      var A = [];
+      var n = 0;
+      var result;
+      while ((result = regExpExec(rx, S)) !== null) {
+        var matchStr = toString$3(result[0]);
+        A[n] = matchStr;
+        if (matchStr === '') rx.lastIndex = advanceStringIndex(S, toLength$1(rx.lastIndex), fullUnicode);
+        n++;
+      }
+      return n === 0 ? null : A;
+    }
+  ];
+});
+
 var $$6 = _export;
 var toObject$2 = toObject$c;
 var lengthOfArrayLike$2 = lengthOfArrayLike$c;
@@ -13640,107 +13822,83 @@ const FullNameDobReviewControl = props => {
 };
 const GoAInputBaseFullNameDobControlReview = withJsonFormsAllOfProps(FullNameDobReviewControl);
 
-let _$5 = t => t,
-  _t$6;
-const PhoneGrid = styled.div(_t$6 || (_t$6 = _$5`
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 0.2rem;
-  align-items: start;
-  margin-bottom: var(--goa-space-l) !important;
-
-  goa-form-item {
-    margin-right: 0 !important;
-  }
-`));
-const PHONE_REGEX = /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
-const normalizePhoneData = value => ({
-  type: (value == null ? void 0 : value.type) || '',
-  number: (value == null ? void 0 : value.number) || ''
-});
-const PhoneNumberWithTypeControl = props => {
-  const {
-    data,
-    path,
-    handleChange,
-    enabled,
-    visible,
-    required
-  } = props;
-  const [formData, setFormData] = useState(normalizePhoneData(data));
-  const [error, setError] = useState(undefined);
+// Encapsulates masked-input state for a GoA input: display value, mount reflection, and change/keypress handling.
+const useMaskedInput = ({
+  mask,
+  inPlace,
+  data,
+  onCommit
+}) => {
+  const format = value => inPlace ? toMaskTemplate(value, mask) : formatWithPattern(value, mask);
+  const initialDisplay = format(typeof data === 'string' ? data : '');
+  // 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(() => {
-    const nextData = normalizePhoneData(data);
-    setFormData(currentData => currentData.type === nextData.type && currentData.number === nextData.number ? currentData : nextData);
-  }, [data]);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const updateFormData = updated => {
-    setFormData(updated);
-    if (updated.number && !PHONE_REGEX.test(updated.number)) {
-      setError('Enter a valid phone number (e.g., (780) 123-4567)');
-    } else {
-      setError(undefined);
+    if (inPlace) {
+      setValue(initialDisplay);
     }
-    handleChange(path, updated);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleChange = detail => {
+    var _target$selectionStar;
+    const rawValue = detail.value;
+    if (!inPlace) {
+      const stored = formatWithPattern(rawValue, mask);
+      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 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.
+  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();
+    }
+  };
+  return {
+    value,
+    handleChange,
+    handleKeyPress
   };
-  return jsx(Visible, {
-    "$visible": visible,
-    children: jsxs(PhoneGrid, {
-      children: [jsx(GoabFormItem, {
-        label: "Phone type",
-        requirement: required ? 'required' : undefined,
-        children: jsxs(GoabDropdown, {
-          name: "type",
-          value: formData.type || '',
-          disabled: !enabled,
-          onChange: detail => updateFormData(Object.assign({}, formData, {
-            type: detail.value
-          })),
-          children: [jsx(GoabDropdownItem, {
-            value: "Mobile"
-          }), jsx(GoabDropdownItem, {
-            value: "Landline"
-          })]
-        })
-      }), jsx(GoabFormItem, {
-        label: "Phone number",
-        error: error,
-        requirement: required ? 'required' : undefined,
-        children: jsx(GoabInput, {
-          type: "tel",
-          name: "number",
-          placeholder: "(000) 000-0000",
-          value: formData.number || '',
-          disabled: !enabled,
-          onChange: detail => updateFormData(Object.assign({}, formData, {
-            number: detail.value
-          }))
-        })
-      })]
-    })
-  });
 };
-const GoAPhoneNumberWithTypeControl = withJsonFormsControlProps(PhoneNumberWithTypeControl);
 
 const PhoneNumberControl = props => {
+  var _uischema$options, _uischema$options2;
   const {
     data,
     path,
     schema,
+    uischema,
     handleChange,
     enabled,
     visible,
     required
   } = props;
+  // Default mask can be overridden per field via the UI schema options.
+  const phoneMask = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.phoneMask) || DEFAULT_PATTERNS.phone.mask;
+  // When in-place, the field shows the fill-in template and edits keep the caret in place.
+  const inPlace = (uischema == null || (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.inPlace) === true;
   const [error, setError] = useState('');
-  const handleInputChange = (name, value) => {
-    if (value && !PHONE_REGEX.test(value)) {
-      setError('Must be a valid 10-digit phone number in format (000) 000-0000');
-    } else {
-      setError('');
+  const {
+    value,
+    handleChange: handleMaskChange,
+    handleKeyPress
+  } = useMaskedInput({
+    mask: phoneMask,
+    inPlace,
+    data,
+    onCommit: stored => {
+      setError(stored && !DEFAULT_PATTERNS.phone.pattern.test(stored) ? DEFAULT_PATTERNS.phone.error : '');
+      handleChange(path, stored);
     }
-    handleChange(path, value);
-  };
+  });
   return jsx(Visible, {
     "$visible": visible,
     children: jsx(GoabFormItem, {
@@ -13754,9 +13912,11 @@ const PhoneNumberControl = props => {
         disabled: !enabled,
         "aria-label": "phone number input",
         testId: `phone-input-${path}`,
-        value: data || '',
-        onChange: detail => handleInputChange(detail.name, detail.value),
-        placeholder: "(000) 000-0000",
+        value: value,
+        maxLength: inPlace ? undefined : phoneMask.length,
+        placeholder: inPlace ? undefined : maskPlaceholder(phoneMask),
+        onChange: detail => handleMaskChange(detail),
+        onKeyPress: inPlace ? detail => handleKeyPress(detail) : undefined,
         width: "100%"
       })
     })
@@ -13766,14 +13926,14 @@ const GoAPhoneNumberControl = withJsonFormsControlProps(PhoneNumberControl);
 
 const PhoneNumberTester = rankWith(4, and(isControl$1, schemaTypeIs('string'), formatIs('phone')));
 
-let _$4 = t => t,
-  _t$5,
+let _$5 = t => t,
+  _t$6,
   _t2$2,
   _t3$1,
   _t4$1,
   _t5,
   _t6;
-const SearchBox = styled.div(_t$5 || (_t$5 = _$4`
+const SearchBox = styled.div(_t$6 || (_t$6 = _$5`
   position: relative;
 
   .suggestions {
@@ -13815,7 +13975,7 @@ const SearchBox = styled.div(_t$5 || (_t$5 = _$4`
     pointer-events: none; /* Prevent spinner from interfering with clicks */
   }
 `));
-const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$4`
+const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$5`
   margin: 0 0 var(--goa-space-m) 0;
   text-wrap: wrap;
   word-break: break-word;
@@ -13823,15 +13983,15 @@ const AddressIndent = styled.div(_t2$2 || (_t2$2 = _$4`
   border-radius: var(--goa-border-radius-xl);
   padding: var(--goa-space-l);
 `));
-const TextWrap = styled.p(_t3$1 || (_t3$1 = _$4`
+const TextWrap = styled.p(_t3$1 || (_t3$1 = _$5`
   text-wrap: auto;
   word-break: break-word;
 `));
-const TextWrapDiv = styled.div(_t4$1 || (_t4$1 = _$4`
+const TextWrapDiv = styled.div(_t4$1 || (_t4$1 = _$5`
   text-wrap: auto;
   word-break: break-word;
 `));
-const LabelDiv = styled.div(_t5 || (_t5 = _$4`
+const LabelDiv = styled.div(_t5 || (_t5 = _$5`
   color: var(--goa-color-text-default);
   font: var(--goa-typography-body-m);
   min-height: 2.625rem;
@@ -13841,7 +14001,7 @@ const LabelDiv = styled.div(_t5 || (_t5 = _$4`
   word-break: break-word;
 `));
 /* istanbul ignore next */
-const ListItem = styled.li(_t6 || (_t6 = _$4`
+const ListItem = styled.li(_t6 || (_t6 = _$5`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
@@ -13878,6 +14038,88 @@ const PhoneNumberReviewControl = props => {
 };
 const GoabInputBasePhoneNumberReviewControl = withJsonFormsAllOfProps(PhoneNumberReviewControl);
 
+let _$4 = t => t,
+  _t$5;
+const PhoneGrid = styled.div(_t$5 || (_t$5 = _$4`
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 0.2rem;
+  align-items: start;
+  margin-bottom: var(--goa-space-l) !important;
+
+  goa-form-item {
+    margin-right: 0 !important;
+  }
+`));
+const PHONE_REGEX = /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
+const normalizePhoneData = value => ({
+  type: (value == null ? void 0 : value.type) || '',
+  number: (value == null ? void 0 : value.number) || ''
+});
+const PhoneNumberWithTypeControl = props => {
+  const {
+    data,
+    path,
+    handleChange,
+    enabled,
+    visible,
+    required
+  } = props;
+  const [formData, setFormData] = useState(normalizePhoneData(data));
+  const [error, setError] = useState(undefined);
+  useEffect(() => {
+    const nextData = normalizePhoneData(data);
+    setFormData(currentData => currentData.type === nextData.type && currentData.number === nextData.number ? currentData : nextData);
+  }, [data]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateFormData = updated => {
+    setFormData(updated);
+    if (updated.number && !PHONE_REGEX.test(updated.number)) {
+      setError('Enter a valid phone number (e.g., (780) 123-4567)');
+    } else {
+      setError(undefined);
+    }
+    handleChange(path, updated);
+  };
+  return jsx(Visible, {
+    "$visible": visible,
+    children: jsxs(PhoneGrid, {
+      children: [jsx(GoabFormItem, {
+        label: "Phone type",
+        requirement: required ? 'required' : undefined,
+        children: jsxs(GoabDropdown, {
+          name: "type",
+          value: formData.type || '',
+          disabled: !enabled,
+          onChange: detail => updateFormData(Object.assign({}, formData, {
+            type: detail.value
+          })),
+          children: [jsx(GoabDropdownItem, {
+            value: "Mobile"
+          }), jsx(GoabDropdownItem, {
+            value: "Landline"
+          })]
+        })
+      }), jsx(GoabFormItem, {
+        label: "Phone number",
+        error: error,
+        requirement: required ? 'required' : undefined,
+        children: jsx(GoabInput, {
+          type: "tel",
+          name: "number",
+          placeholder: "(000) 000-0000",
+          value: formData.number || '',
+          disabled: !enabled,
+          onChange: detail => updateFormData(Object.assign({}, formData, {
+            number: detail.value
+          }))
+        })
+      })]
+    })
+  });
+};
+const GoAPhoneNumberWithTypeControl = withJsonFormsControlProps(PhoneNumberWithTypeControl);
+
 const isPhoneNumberWithType = createSchemaMatchTester(['number', 'type'], true);
 const PhoneNumberWithTypeTester = rankWith(4, isPhoneNumberWithType);
 
@@ -20300,6 +20542,8 @@ const GoAErrorControlTester = rankWith(1000, (uischema, schema, context) => {
 });
 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 createDefaultAjv = (...schemas) => {
   const ajv = new Ajv({
     allErrors: true,
@@ -20313,6 +20557,9 @@ const createDefaultAjv = (...schemas) => {
   addErrors(ajv);
   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('phone', PHONE_REGEX);
   ajv.addFormat('computed', /^[a-zA-Z0-9._-]+$/);
   ajv.addFormat('file-urn', {
@@ -20664,4 +20911,4 @@ const GoARenderers = [...GoABaseRenderers, {
 }];
 const GoACells = [...InputCells];
 
-export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, ADD_USER_ACTION, AUTO_POPULATE_SOURCES, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, AddressLoopUpControlTableReview, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationPagesRendererTester, CategorizationStepperRendererTester, CheckboxGroup, ContactInformationTester, ContextProviderC, ContextProviderClass, ContextProviderFactory, ContractInfoControl, ContractInfoControlReview, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormPageStepper, FormPagesView, FormStepper, FormStepperControl, FormStepperPagesControl, FormStepperReviewControl, FormStepperReviewer, FormStepperView, FullNameControl, FullNameControlReview, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABaseTableReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACalculationControl, GoACalculationControlTester, GoACells, GoACheckoutGroupControlTester, GoAContractInfoControlReview, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEmailControl, GoAEmailControlTester, GoAEmailInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputBaseFullNameControlReview, GoAInputBaseFullNameDobControlReview, GoAInputBaseReviewControl, GoAInputBaseTableReview, GoAInputBaseTableReviewControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputEmailControl, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoAPhoneNumberControl, GoAPhoneNumberWithTypeControl, GoAPrimitiveArrayRenderer, GoAPrimitiveArrayTester, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoabInputBasePhoneNumberReviewControl, GoabInputBasePhoneNumberWithTypeReviewControl, GoabInputInteger, InnerGoAInputText, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, NAVIGATION_PARAMS, OPTION_DEFINITIONS, PHONE_REGEX, PhoneGrid, PhoneNumberControl, PhoneNumberReviewControl, PhoneNumberTester, PhoneNumberWithTypeControl, PhoneNumberWithTypeReviewControl, PhoneNumberWithTypeTester, PrimitiveArrayControl, REVIEW_CHANGE_ACTION, RadioGroup, ReviewRenderContext, ReviewRenderProvider, USER_FIELD_DEFINITIONS, autoPopulatePropertiesMonaco, autoPopulateValue, categoriesAreValid, createAutoPopulateMiddleware, createDefaultAjv, enumControl, errMalformedDate, fetchRegisterConfigFromOptions$1 as fetchRegisterConfigFromOptions, formatSin, getAutoPopulateControls, getAutoPopulatedData, getByJsonPointer, getCategoryScopes, getExternalFormPath, getNavigationTargetFromParams, getNavigationTargets, hasDataInScopes, hasDataValue, isAddressLookup, isContactInformation, isFullName, isFullNameDoB, isPhoneNumberWithType, mergeAutoPopulatedData, predictiveOptionsMonaco, registerReducer, resolveRefs, toDateTimeLocalInputValue, tryResolveRefs, useRegisterUser, useReviewContext, useShowChangeButtons };
+export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, ADD_USER_ACTION, AUTO_POPULATE_SOURCES, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, AddressLoopUpControlTableReview, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationPagesRendererTester, CategorizationStepperRendererTester, CheckboxGroup, ContactInformationTester, ContextProviderC, ContextProviderClass, ContextProviderFactory, ContractInfoControl, ContractInfoControlReview, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormPageStepper, FormPagesView, FormStepper, FormStepperControl, FormStepperPagesControl, FormStepperReviewControl, FormStepperReviewer, FormStepperView, FullNameControl, FullNameControlReview, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABaseTableReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACalculationControl, GoACalculationControlTester, GoACells, GoACheckoutGroupControlTester, GoAContractInfoControlReview, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEmailControl, GoAEmailControlTester, GoAEmailInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputBaseFullNameControlReview, GoAInputBaseFullNameDobControlReview, GoAInputBaseReviewControl, GoAInputBaseTableReview, GoAInputBaseTableReviewControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputEmailControl, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoAPhoneNumberControl, GoAPhoneNumberWithTypeControl, GoAPrimitiveArrayRenderer, GoAPrimitiveArrayTester, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoabInputBasePhoneNumberReviewControl, GoabInputBasePhoneNumberWithTypeReviewControl, GoabInputInteger, InnerGoAInputText, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, NAVIGATION_PARAMS, OPTION_DEFINITIONS, PHONE_REGEX, PhoneGrid, PhoneNumberControl, PhoneNumberReviewControl, PhoneNumberTester, PhoneNumberWithTypeControl, PhoneNumberWithTypeReviewControl, PhoneNumberWithTypeTester, PrimitiveArrayControl, REVIEW_CHANGE_ACTION, RadioGroup, ReviewRenderContext, ReviewRenderProvider, USER_FIELD_DEFINITIONS, autoPopulatePropertiesMonaco, autoPopulateValue, categoriesAreValid, createAutoPopulateMiddleware, createDefaultAjv, enumControl, errMalformedDate, fetchRegisterConfigFromOptions$1 as fetchRegisterConfigFromOptions, getAutoPopulateControls, getAutoPopulatedData, getByJsonPointer, getCategoryScopes, getExternalFormPath, getNavigationTargetFromParams, getNavigationTargets, hasDataInScopes, hasDataValue, isAddressLookup, isContactInformation, isFullName, isFullNameDoB, isPhoneNumberWithType, mergeAutoPopulatedData, predictiveOptionsMonaco, registerReducer, resolveRefs, toDateTimeLocalInputValue, tryResolveRefs, useRegisterUser, useReviewContext, useShowChangeButtons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.74.0",
+  "version": "2.75.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-03T20:26:40.184Z",
-  "sourceCommit": "a9f11f1d8a8d4394f1d1bdfcd5591d245e024d51",
+  "generatedAt": "2026-09-08T14:57:25.870Z",
+  "sourceCommit": "4bfd7a826d9a48271e8d7b7e77fbee5e560c102f",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/Controls/Inputs/InputTextControl.d.ts

@@ -4,7 +4,6 @@ import { WithInputProps } from './type';
 import { RegisterConfig } from '../../Context/register';
 export type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
 export declare function fetchRegisterConfigFromOptions(options: Record<string, unknown> | undefined): RegisterConfig | undefined;
-export declare const formatSin: (value: string) => string;
 export declare const GoAInputText: (props: GoAInputTextProps) => JSX.Element;
 export declare const InnerGoAInputText: (props: GoAInputTextProps) => JSX.Element;
 export declare const GoATextControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/Controls/Inputs/type.d.ts

@@ -4,6 +4,17 @@ export interface WithInputProps {
     isVisited?: boolean;
     setIsVisited?: () => void;
 }
+/**
+ * UI schema options recognized by the text input control.
+ */
+export interface InputControlOptions {
+    /**
+     * Mask template applied to the value on blur, e.g. "(###) ###-####".
+     * '#' consumes one input character; every other character is inserted as a literal.
+     * Formatting only; validation is still driven by the JSON schema `pattern`.
+     */
+    formatPattern?: string;
+}
 /**
  * Base event control props to handle event controls
  */

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

@@ -32,6 +32,10 @@ export declare const onKeyPressForTimeControl: (props: EventKeyPressControlProps
  * @param props - EventKeyPressControlProps
  */
 export declare const onKeyPressForDateControl: (props: EventKeyPressControlProps) => void;
+/**
+ * Re-exported from ./patternForm to keep existing import paths stable.
+ */
+export { applyFormatPattern } from './patternForm';
 /**
  * Helper function to process onBlur events for text controls.
  * @param props - EventBlurControlProps

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

@@ -0,0 +1,41 @@
+export interface MaskPattern {
+    mask: string;
+    pattern: RegExp;
+    error: string;
+    allowedKeys?: RegExp;
+}
+export declare const DEFAULT_PATTERNS: Record<string, MaskPattern>;
+export declare const MASK_PLACEHOLDERS: Set<string>;
+export declare const MASK_CONTROL_KEYS: Set<string>;
+export declare const shouldBlockKey: (key: string, allowedKeys?: RegExp) => boolean;
+export declare const filterAllowedKeys: (value: string, allowedKeys?: RegExp) => string;
+export declare const maskDigitCount: (mask: string) => number;
+export declare const formatWithPattern: (value: string, mask: string) => string;
+export declare const toMaskTemplate: (value: string, mask: string) => string;
+export declare const caretAfterDigits: (display: string, digitCount: number) => number;
+export interface MaskEdit {
+    display: string;
+    stored: string;
+    caret: number;
+}
+export declare const computeMaskEdit: (rawValue: string, caretIndex: number, mask: string) => MaskEdit;
+export declare const isMaskFilled: (value: string, mask: string) => boolean;
+export declare const maskPlaceholder: (mask: string) => string;
+type MaskInputTarget = (HTMLInputElement & {
+    setSelectionRange?: (start: number, end: number) => void;
+}) | undefined;
+export declare const getMaskInputTarget: (detail: {
+    event?: Event;
+}) => MaskInputTarget;
+export declare const applyInPlaceEdit: (target: MaskInputTarget, edit: MaskEdit) => void;
+/**
+ * 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
+ */
+export declare const applyFormatPattern: (value: string, mask: string | undefined) => string;
+export {};

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

@@ -0,0 +1,21 @@
+interface MaskChangeDetail {
+    value: string;
+    event?: Event;
+}
+interface MaskKeyPressDetail {
+    key: string;
+    event?: Event;
+}
+interface UseMaskedInputOptions {
+    mask: string;
+    inPlace: boolean;
+    data: unknown;
+    onCommit: (stored: string) => void;
+}
+interface UseMaskedInputResult {
+    value: string;
+    handleChange: (detail: MaskChangeDetail) => void;
+    handleKeyPress: (detail: MaskKeyPressDetail) => void;
+}
+export declare const useMaskedInput: ({ mask, inPlace, data, onCommit }: UseMaskedInputOptions) => UseMaskedInputResult;
+export {};