@abgov/jsonforms-components 2.60.6 → 2.60.8

package/index.esm.js

@@ -7270,19 +7270,29 @@ 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 => {
-  const inputVal = value == null ? void 0 : value.replace(/ /g, '');
-  let inputNumbersOnly = inputVal == null ? void 0 : inputVal.replace(/\D/g, '');
-  if (inputNumbersOnly.length > 16) {
-    inputNumbersOnly = inputNumbersOnly.substr(0, 9);
+  var _digits$match$join, _digits$match;
+  if (!allowedSinInputPattern.test(value)) {
+    return '';
+  }
+  if (formattedSinPattern.test(value)) {
+    return value;
   }
-  const splits = inputNumbersOnly.match(/.{1,3}/g);
-  let spacedNumber = '';
-  if (splits) {
-    spacedNumber = splits.join(' ');
+  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;
+  if (target) {
+    target.value = value;
   }
-  const formatVal = spacedNumber.length > 11 ? spacedNumber.slice(0, 11) : spacedNumber;
-  return formatVal;
 };
 const GoAInputText = props => {
   return jsxs(JsonFormRegisterProvider, {
@@ -7307,13 +7317,14 @@ const InnerGoAInputText = props => {
     setIsVisited
   } = props;
   const user = useRegisterUser();
-  const initialValue = data;
+  const isSinField = schema.title === sinTitle;
+  const initialValue = isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data;
   const [manualInput, setManualInput] = useState(false);
   const [localValue, setLocalValue] = useState(initialValue);
   const debouncedValue = useDebounce(localValue, 300);
   useEffect(() => {
-    setLocalValue(data);
-  }, [data]);
+    setLocalValue(isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data);
+  }, [data, isSinField]);
   useEffect(() => {
     if (!user || data) return;
     const autoPopulatedValue = schema.default || user && autoPopulateValue(user, props);
@@ -7330,11 +7341,12 @@ const InnerGoAInputText = props => {
   }, [schema.default]);
   /* istanbul ignore next */
   useEffect(() => {
-    if (debouncedValue === data) return;
+    const dataForInput = isSinField && typeof data === 'string' ? formatSinForDisplay(data) : data;
+    if (debouncedValue === dataForInput) return;
     // Only sync if debouncedValue differs from data and is not initial empty state
-    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
+    if (debouncedValue !== dataForInput && (debouncedValue !== '' || data !== undefined)) {
       onChangeForInputControl({
-        value: debouncedValue,
+        value: isSinField ? formatSinForSchema(debouncedValue) : debouncedValue,
         controlProps: props
       });
     }
@@ -7386,10 +7398,32 @@ 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 isSinField = schema.title === sinTitle;
   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();
+    }
+  };
   return jsx("div", {
+    onKeyDownCapture: preventInvalidSinKey,
+    onBeforeInputCapture: preventInvalidSinBeforeInput,
+    onPasteCapture: preventInvalidSinPaste,
     children: mergedOptions.length > 1 ? jsx(GoabDropdown, {
       name: `jsonforms-${path}-dropdown`,
       value: data,
@@ -7410,7 +7444,7 @@ const InnerGoAInputText = props => {
       value: localValue,
       width: width,
       readonly: readOnly,
-      maxLength: isSinField ? 11 : '',
+      maxLength: isSinField ? 11 : undefined,
       placeholder: placeholder,
       name: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
       ariaLabel: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
@@ -7418,7 +7452,11 @@ const InnerGoAInputText = props => {
     }, (_uischema$options8 = uischema.options) == null ? void 0 : _uischema$options8.componentProps, {
       onChange: detail => {
         let formattedValue = detail.value;
-        if (schema && schema.title === sinTitle && detail.value !== '') {
+        if (isSinField && !allowedSinInputPattern.test(detail.value)) {
+          resetInputValue(detail, localValue);
+          return;
+        }
+        if (isSinField && detail.value !== '') {
           formattedValue = formatSin(detail.value);
         }
         setLocalValue(formattedValue);
@@ -7436,6 +7474,12 @@ const InnerGoAInputText = props => {
           controlProps: props,
           value: autoCapitalize ? detail.value.toUpperCase() : detail.value
         });
+      },
+      onKeyPress: detail => {
+        if (isSinField && detail.key && !allowedSinKeyPattern.test(detail.key)) {
+          var _detail$event2;
+          (_detail$event2 = detail.event) == null || _detail$event2.preventDefault();
+        }
       }
     }, uischema == null || (_uischema$options9 = uischema.options) == null ? void 0 : _uischema$options9.componentProps))
   });
@@ -9063,6 +9107,8 @@ const EmptyList$1 = ({
   noDataMessage
 }) => jsx(GoabGrid, {
   minChildWidth: "60ch",
+  mt: "l",
+  mb: "l",
   children: jsx(TextCenter, {
     children: jsx("b", {
       children: noDataMessage
@@ -12816,25 +12862,34 @@ const GoAHorizontalLayoutComponent = ({
   enabled,
   visible
 }) => {
-  var _layout$elements, _uischema$options;
+  var _uischema$options;
   const layout = uischema;
-  const hasHelpContent = (_layout$elements = layout.elements) == null ? void 0 : _layout$elements.some(element => element.type === 'HelpContent');
+  const elements = layout.elements || [];
+  const helpElements = elements.filter(element => element.type === 'HelpContent');
+  const contentElements = elements.filter(element => element.type !== 'HelpContent');
   const childProps = {
-    elements: layout.elements,
     schema,
     path,
     enabled,
-    direction: hasHelpContent ? 'column' : 'row',
     visible,
     width: (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.width) || '300px',
     option: {
       space: 'xl'
     }
   };
-  return jsx(LayoutRenderer, Object.assign({}, childProps, {
-    renderers: renderers,
-    cells: cells
-  }));
+  return jsxs(Fragment, {
+    children: [helpElements.length > 0 && jsx(LayoutRenderer, Object.assign({}, childProps, {
+      direction: "column",
+      elements: helpElements,
+      renderers: renderers,
+      cells: cells
+    })), contentElements.length > 0 && jsx(LayoutRenderer, Object.assign({}, childProps, {
+      direction: "row",
+      elements: contentElements,
+      renderers: renderers,
+      cells: cells
+    }))]
+  });
 };
 const GoAHorizontalReviewLayoutComponent = ({
   uischema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.60.6",
+  "version": "2.60.8",
   "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-04-17T15:42:29.517Z",
-  "sourceCommit": "5149af8455ea3e52212089ed42d0e955fe2569e5",
+  "generatedAt": "2026-04-17T20:12:05.295Z",
+  "sourceCommit": "0dbb4e19e24318d32bf481fdf350f6140ad10f5b",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [