@abgov/jsonforms-components 1.38.0 → 1.38.2

package/index.esm.js

@@ -4511,6 +4511,7 @@ const Dropdown = props => {
     onChange,
     optionListMaxHeight,
     isAutoCompletion,
+    enabled,
     id
   } = props;
   const [isOpen, setIsOpen] = useState(false);
@@ -4674,6 +4675,7 @@ const Dropdown = props => {
       onTrailingIconClick: () => {
         setIsOpen(!isOpen);
       },
+      disabled: !enabled,
       name: `dropdown-${label}`,
       width: "100%",
       value: inputText,
@@ -4729,10 +4731,7 @@ const EnumSelect = props => {
   var _a, _b, _c, _d;
   const {
     data,
-    id,
     enabled,
-    errors,
-    schema,
     path,
     handleChange,
     options,
@@ -4784,6 +4783,7 @@ const EnumSelect = props => {
       message: error
     }) : jsx(Dropdown, {
       items: mergedOptions,
+      enabled: !enabled,
       selected: data,
       id: `jsonforms-${label}-dropdown`,
       label: label,
@@ -8141,6 +8141,18 @@ const NameInputs = ({
 }) => {
   var _a, _b;
   const [errors, setErrors] = useState({});
+  /* istanbul ignore next */
+  // eslint-disable-next-line
+  const handleRequiredFieldBlur = (name, updatedData) => {
+    const err = Object.assign({}, errors);
+    if ((!(data === null || data === void 0 ? void 0 : data[name]) || (data === null || data === void 0 ? void 0 : data[name]) === '') && requiredFields.includes(name) && (!updatedData || (updatedData === null || updatedData === void 0 ? void 0 : updatedData[name]) === '')) {
+      const modifiedName = name === 'firstName' ? 'First name' : name === 'lastName' ? 'Last name' : '';
+      err[name] = `${modifiedName} is required`;
+    } else {
+      err[name] = '';
+    }
+    setErrors(err);
+  };
   return jsxs(GoAGrid, {
     minChildWidth: "0ch",
     gap: "s",
@@ -8157,6 +8169,10 @@ const NameInputs = ({
         ariaLabel: 'name-form-first-name',
         value: firstName || '',
         onChange: (name, value) => handleInputChange(name, value),
+        onBlur: name => {
+          /* istanbul ignore next */
+          handleRequiredFieldBlur(name);
+        },
         width: "100%"
       })
     }), jsx(GoAFormItem, {
@@ -8184,6 +8200,10 @@ const NameInputs = ({
         ariaLabel: 'name-form-last-name',
         value: lastName || '',
         onChange: (name, value) => handleInputChange(name, value),
+        onBlur: name => {
+          /* istanbul ignore next */
+          handleRequiredFieldBlur(name);
+        },
         width: "100%"
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.38.0",
+  "version": "1.38.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/src/lib/Components/DropDownTypes.d.ts

@@ -6,6 +6,7 @@ export interface DropdownProps {
     items: Array<Item>;
     label: string;
     selected: string;
+    enabled: boolean;
     optionListMaxHeight?: string;
     onChange: (value: string) => void;
     isAutoCompletion?: boolean;

package/src/lib/Controls/FullName/FullNameInputs.d.ts

@@ -1,15 +1,10 @@
 import React from 'react';
-interface Data {
-    firstName: string;
-    middleName: string;
-    lastName: string;
-}
 interface NameInputsProps {
     firstName: string;
     middleName?: string;
     lastName: string;
     isStepperReview?: boolean;
-    data: Data;
+    data: any;
     requiredFields: string[];
     handleInputChange: (field: string, value: string) => void;
 }