@abgov/jsonforms-components 2.63.2 → 2.63.3

package/index.esm.js

@@ -17721,6 +17721,7 @@ const NameInputs = ({
 }) => {
   var _displayedErrors$firs, _displayedErrors$last;
   const [internalErrors, setInternalErrors] = useState({});
+  const containerRef = useRef(null);
   const currentValues = {
     firstName,
     middleName: middleName || '',
@@ -17729,8 +17730,8 @@ const NameInputs = ({
   useEffect(() => {
     const timeout = window.setTimeout(() => {
       ['firstName', 'middleName', 'lastName'].forEach(field => {
-        var _input$value;
-        const input = document.querySelector(`goa-input[name="${field}"]`);
+        var _containerRef$current, _input$value;
+        const input = (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.querySelector(`goa-input[name="${field}"]`);
         const liveValue = (input == null || (_input$value = input.value) == null ? void 0 : _input$value.trim()) || '';
         if (liveValue && !currentValues[field]) {
           handleInputChange(field, liveValue);
@@ -17776,62 +17777,68 @@ const NameInputs = ({
       handleRequiredFieldBlur(name);
     }
   };
-  return jsxs(GoabGrid, {
-    minChildWidth: "0ch",
-    gap: "s",
-    mb: "m",
-    testId: "wrapper",
-    children: [jsx(GoabFormItem, {
-      testId: "form-item-first-name",
-      label: "First name",
-      requirement: requiredFields != null && requiredFields.includes('firstName') ? 'required' : undefined,
-      error: (_displayedErrors$firs = displayedErrors == null ? void 0 : displayedErrors['firstName']) != null ? _displayedErrors$firs : '',
-      children: jsx(GoabInput, {
-        type: "text",
-        name: "firstName",
-        disabled: disabled,
-        testId: "name-form-first-name",
-        ariaLabel: 'name-form-first-name',
-        value: firstName || '',
-        onChange: detail => handleInputChange(detail.name, detail.value),
-        onBlur: detail => {
-          handleBlur(detail.name);
-        },
-        width: "100%"
-      })
-    }), jsx(GoabFormItem, {
-      testId: "form-item-middle-name",
-      label: "Middle name",
-      requirement: requiredFields != null && requiredFields.includes('middleName') ? 'required' : undefined,
-      children: jsx(GoabInput, {
-        type: "text",
-        name: "middleName",
-        disabled: disabled,
-        testId: "name-form-middle-name",
-        ariaLabel: 'name-form-middle-name',
-        value: middleName || '',
-        onChange: detail => handleInputChange(detail.name, detail.value),
-        width: "100%"
-      })
-    }), jsx(GoabFormItem, {
-      testId: "form-item-last-name",
-      label: "Last name",
-      requirement: requiredFields != null && requiredFields.includes('lastName') ? 'required' : undefined,
-      error: (_displayedErrors$last = displayedErrors == null ? void 0 : displayedErrors['lastName']) != null ? _displayedErrors$last : '',
-      children: jsx(GoabInput, {
-        type: "text",
-        name: "lastName",
-        disabled: disabled,
-        testId: "name-form-last-name",
-        ariaLabel: 'name-form-last-name',
-        value: lastName || '',
-        onChange: detail => handleInputChange(detail.name, detail.value),
-        onBlur: detail => {
-          handleBlur(detail.name);
-        },
-        width: "100%"
-      })
-    })]
+  return jsx("div", {
+    ref: containerRef,
+    style: {
+      display: 'contents'
+    },
+    children: jsxs(GoabGrid, {
+      minChildWidth: "0ch",
+      gap: "s",
+      mb: "m",
+      testId: "wrapper",
+      children: [jsx(GoabFormItem, {
+        testId: "form-item-first-name",
+        label: "First name",
+        requirement: requiredFields != null && requiredFields.includes('firstName') ? 'required' : undefined,
+        error: (_displayedErrors$firs = displayedErrors == null ? void 0 : displayedErrors['firstName']) != null ? _displayedErrors$firs : '',
+        children: jsx(GoabInput, {
+          type: "text",
+          name: "firstName",
+          disabled: disabled,
+          testId: "name-form-first-name",
+          ariaLabel: 'name-form-first-name',
+          value: firstName || '',
+          onChange: detail => handleInputChange(detail.name, detail.value),
+          onBlur: detail => {
+            handleBlur(detail.name);
+          },
+          width: "100%"
+        })
+      }), jsx(GoabFormItem, {
+        testId: "form-item-middle-name",
+        label: "Middle name",
+        requirement: requiredFields != null && requiredFields.includes('middleName') ? 'required' : undefined,
+        children: jsx(GoabInput, {
+          type: "text",
+          name: "middleName",
+          disabled: disabled,
+          testId: "name-form-middle-name",
+          ariaLabel: 'name-form-middle-name',
+          value: middleName || '',
+          onChange: detail => handleInputChange(detail.name, detail.value),
+          width: "100%"
+        })
+      }), jsx(GoabFormItem, {
+        testId: "form-item-last-name",
+        label: "Last name",
+        requirement: requiredFields != null && requiredFields.includes('lastName') ? 'required' : undefined,
+        error: (_displayedErrors$last = displayedErrors == null ? void 0 : displayedErrors['lastName']) != null ? _displayedErrors$last : '',
+        children: jsx(GoabInput, {
+          type: "text",
+          name: "lastName",
+          disabled: disabled,
+          testId: "name-form-last-name",
+          ariaLabel: 'name-form-last-name',
+          value: lastName || '',
+          onChange: detail => handleInputChange(detail.name, detail.value),
+          onBlur: detail => {
+            handleBlur(detail.name);
+          },
+          width: "100%"
+        })
+      })]
+    })
   });
 };
 
@@ -17972,14 +17979,16 @@ formData,
 // eslint-disable-next-line
 updateFormData,
 // eslint-disable-next-line
-handleRequiredFieldBlur) {
+handleRequiredFieldBlur, rootRef) {
   /* istanbul ignore next */
   useEffect(() => {
     const rAF = requestAnimationFrame(() => {
       const timeout = setTimeout(() => {
         const updated = {};
         fields.forEach(field => {
-          const input = document.querySelector(`goa-input[name="${field}"]`);
+          var _rootRef$current;
+          const root = (_rootRef$current = rootRef == null ? void 0 : rootRef.current) != null ? _rootRef$current : document;
+          const input = root.querySelector(`goa-input[name="${field}"]`);
           if (input && input.value && !(formData != null && formData[field])) {
             updated[field] = input.value;
           }
@@ -18049,9 +18058,9 @@ const FullNameDobControl = props => {
   };
   // eslint-disable-next-line
   const handleRequiredFieldBlur = (name, updatedData) => {
-    var _ref, _ref2, _updatedData$name, _document$querySelect;
+    var _ref, _ref2, _updatedData$name, _controlRef$current;
     const err = Object.assign({}, errors);
-    const liveInputValue = (_ref = (_ref2 = (_updatedData$name = updatedData == null ? void 0 : updatedData[name]) != null ? _updatedData$name : data == null ? void 0 : data[name]) != null ? _ref2 : (_document$querySelect = document.querySelector(`goa-input[name="${name}"]`)) == null ? void 0 : _document$querySelect.value) != null ? _ref : '';
+    const liveInputValue = (_ref = (_ref2 = (_updatedData$name = updatedData == null ? void 0 : updatedData[name]) != null ? _updatedData$name : data == null ? void 0 : data[name]) != null ? _ref2 : (_controlRef$current = controlRef.current) == null || (_controlRef$current = _controlRef$current.querySelector(`goa-input[name="${name}"]`)) == null ? void 0 : _controlRef$current.value) != null ? _ref : '';
     if (requiredFields.includes(name) && liveInputValue.trim() === '') {
       err[name] = `${getRequiredLabel(name)} is required`;
     } else {
@@ -18059,10 +18068,10 @@ const FullNameDobControl = props => {
     }
     setErrors(err);
   };
-  useSyncAutofillFields(AUTOFILL_FIELDS, formData, updateFormData, handleRequiredFieldBlur);
+  useSyncAutofillFields(AUTOFILL_FIELDS, formData, updateFormData, handleRequiredFieldBlur, controlRef);
   useEffect(() => {
-    var _controlRef$current$q, _controlRef$current, _host$shadowRoot;
-    const host = (_controlRef$current$q = (_controlRef$current = controlRef.current) == null ? void 0 : _controlRef$current.querySelector('goa-input[type="date"]')) != null ? _controlRef$current$q : null;
+    var _controlRef$current$q, _controlRef$current2, _host$shadowRoot;
+    const host = (_controlRef$current$q = (_controlRef$current2 = controlRef.current) == null ? void 0 : _controlRef$current2.querySelector('goa-input[type="date"]')) != null ? _controlRef$current$q : null;
     host == null || (_host$shadowRoot = host.shadowRoot) == null || _host$shadowRoot.querySelector('input[type="date"]');
     ensureGoaDatePointerCursor(host);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.63.2",
+  "version": "2.63.3",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-05-08T21:36:44.488Z",
-  "sourceCommit": "0bebf32ef2cb6014620aa6a7bec46bf183375c9b",
+  "generatedAt": "2026-05-11T21:26:03.548Z",
+  "sourceCommit": "b4b6b92cea3e3a44973de17d0d76c1f60409f930",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

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

@@ -1 +1,2 @@
-export declare function useSyncAutofillFields(fields: string[], formData: any, updateFormData: (data: any) => void, handleRequiredFieldBlur: (name: string, updatedData?: any) => void): void;
+import { type RefObject } from 'react';
+export declare function useSyncAutofillFields(fields: string[], formData: any, updateFormData: (data: any) => void, handleRequiredFieldBlur: (name: string, updatedData?: any) => void, rootRef?: RefObject<HTMLElement>): void;