@abgov/jsonforms-components 1.53.8 → 1.53.9

package/index.esm.js

@@ -2635,7 +2635,7 @@ const invalidSin = 'Social insurance number is invalid';
  * @param words
  * @returns sentence word string.
  */
-const capitalizeFirstLetter = words => {
+const capitalizeFirstLetter$1 = words => {
   const value = words.charAt(0).toUpperCase() + words.slice(1).toLowerCase();
   return value;
 };
@@ -2661,7 +2661,7 @@ const controlScopeMatchesLabel = (scope, label) => {
 const getLabelText = (scope, label) => {
   let labelToUpdate = '';
   if (controlScopeMatchesLabel(scope, label || '') && !areAllUppercase(label)) {
-    labelToUpdate = capitalizeFirstLetter(label || '');
+    labelToUpdate = capitalizeFirstLetter$1(label || '');
   } else {
     labelToUpdate = label || '';
   }
@@ -2709,7 +2709,7 @@ const checkFieldValidity = props => {
     uischema,
     schema
   } = props;
-  const labelToUpdate = getLabelText(uischema.scope, label);
+  const labelToUpdate = (uischema === null || uischema === void 0 ? void 0 : uischema.scope) ? getLabelText(uischema === null || uischema === void 0 ? void 0 : uischema.scope, label) : label;
   const extraSchema = schema;
   if (extraSchema && data && (extraSchema === null || extraSchema === void 0 ? void 0 : extraSchema.title) === sinTitle) {
     if (data.length === 11 && !validateSinWithLuhn(data)) {
@@ -2991,7 +2991,7 @@ const onChangeForInputControl = props => {
     handleChange,
     path
   } = controlProps;
-  handleChange(path, value);
+  handleChange(path, value === '' ? undefined : value);
 };
 /**
  * Helper function to process onChange event for Date controls.
@@ -4470,9 +4470,6 @@ const GoAInputText = props => {
       // maxLength={appliedUiSchemaOptions?.maxLength}
       name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
       testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
-      // Don't use handleChange in the onChange event, use the keyPress or onBlur.
-      // If you use it onChange along with keyPress event it will cause a
-      // side effect that causes the validation to render when it shouldn't.
       onChange: (name, value) => {
         let formattedValue = value;
         if (schema && schema.title === sinTitle && value !== '') {
@@ -6793,7 +6790,8 @@ let _$2 = t => t,
   _t11,
   _t12,
   _t13,
-  _t14;
+  _t14,
+  _t15;
 const DeleteDialogContent = styled.div(_t$2 || (_t$2 = _$2`
   margin-bottom: var(--goa-space-m);
 `));
@@ -6813,47 +6811,52 @@ const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$2`
     font-size: var(--goa-font-size-2);
   }
 `));
-const TextCenter = styled.div(_t5$1 || (_t5$1 = _$2`
+const RequiredSpan = styled.span(_t5$1 || (_t5$1 = _$2`
+  color: #666666;
+  font-weight: var(--goa-font-weight-regular);
+  font-size: var(--goa-font-size-2);
+`));
+const TextCenter = styled.div(_t6$1 || (_t6$1 = _$2`
   text-align: center;
 `));
-const SideMenuItem = styled.div(_t6$1 || (_t6$1 = _$2`
+const SideMenuItem = styled.div(_t7 || (_t7 = _$2`
   &:hover {
     background: #f1f1f1;
   }
 `));
-const RowFlex = styled.div(_t7 || (_t7 = _$2`
+const RowFlex = styled.div(_t8 || (_t8 = _$2`
   display: flex;
   align-items: stretch;
 `));
-const RowFlexMenu = styled.div(_t8 || (_t8 = _$2`
+const RowFlexMenu = styled.div(_t9 || (_t9 = _$2`
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #dcdcdc;
 `));
-const FlexTabs = styled.div(_t9 || (_t9 = _$2`
+const FlexTabs = styled.div(_t10 || (_t10 = _$2`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
   margin-right: 1.5rem;
 `));
-const FlexForm = styled.div(_t10 || (_t10 = _$2`
+const FlexForm = styled.div(_t11 || (_t11 = _$2`
   flex-direction: column;
   margin: 1.5rem 0;
   flex: 3;
 `));
-const TabName = styled.div(_t11 || (_t11 = _$2`
+const TabName = styled.div(_t12 || (_t12 = _$2`
   margin: 1rem 0 1rem 1rem;
   font-weight: 700;
 `));
-const Trash = styled.div(_t12 || (_t12 = _$2`
+const Trash = styled.div(_t13 || (_t13 = _$2`
   margin: 0.75rem 1.25rem 0.75rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t13 || (_t13 = _$2`
+const ListContainer = styled.div(_t14 || (_t14 = _$2`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t14 || (_t14 = _$2`
+const TableTHHeader = styled.th(_t15 || (_t15 = _$2`
   background-color: var(--goa-color-greyscale-100) !important;
 `));
 
@@ -6928,7 +6931,7 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
         "aria-label": translations.addAriaLabel,
         onClick: addItem(path, createDefaultValue(schema, rootSchema)),
         type: (_c = (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.addButtonType) !== null && _c !== void 0 ? _c : 'primary',
-        children: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.addButtonText) || capitalizeFirstLetter(`Add ${arrayLabel}`)
+        children: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.addButtonText) || capitalizeFirstLetter$1(`Add ${arrayLabel}`)
       })
     })
   });
@@ -6955,7 +6958,13 @@ function objectListReducer(state, action) {
           category
         } = action.payload;
         const newCategories = Object.assign({}, categories);
-        newCategories[name].data = category;
+        if (!newCategories[name]) {
+          newCategories[name] = {
+            data: category
+          };
+        } else {
+          newCategories[name].data = category;
+        }
         return Object.assign(Object.assign({}, state), {
           categories: newCategories
         });
@@ -7090,8 +7099,12 @@ const ctxToNonEmptyCellProps$1 = (ctx, ownProps) => {
     handleChange: ownProps.handleChange
   };
 };
+function capitalizeFirstLetter(str) {
+  if (!str) return ''; // Handle empty strings
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}
 const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
-  var _a;
+  var _a, _b;
   const {
     schema,
     enabled,
@@ -7107,10 +7120,11 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
     errors
   } = props;
   const properties = (schema === null || schema === void 0 ? void 0 : schema.items) && 'properties' in schema.items && schema.items.properties || {};
+  const required = (_a = schema.items) === null || _a === void 0 ? void 0 : _a.required;
   return jsxs(NonEmptyCellStyle, {
     children: [
     // eslint-disable-next-line
-    (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.map(element => {
+    (_b = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _b === void 0 ? void 0 : _b.map(element => {
       return jsx(JsonFormsDispatch, {
         "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
@@ -7127,8 +7141,10 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
           children: [Object.keys(properties).map((key, index) => {
             if (!isInReview) {
               return jsx("th", {
-                children: jsx("p", {
-                  children: convertToSentenceCase(key)
+                children: jsxs("p", {
+                  children: [convertToSentenceCase(key), (required === null || required === void 0 ? void 0 : required.includes(key)) && jsx(RequiredSpan, {
+                    children: "(required)"
+                  })]
                 })
               }, index);
             }
@@ -7152,21 +7168,26 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
               var _a;
               const dataObject = properties[element];
               const schemaName = element;
+              const currentData = data && data[num] ? data[num][element] : '';
               const error = errors === null || errors === void 0 ? void 0 : errors.find(
               // eslint-disable-next-line
               e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}`);
+              if ((error === null || error === void 0 ? void 0 : error.message.includes('must NOT have fewer')) && required.find(r => r === schemaName) && (isEmptyBoolean(schema, currentData) || isEmptyNumber(schema, currentData))) {
+                error.message = `${capitalizeFirstLetter(schemaName)} is required`;
+              }
               return jsx("td", {
                 children: isInReview ? jsx("div", {
                   "data-testid": `#/properties/${schemaName}-input-${i}-review`,
-                  children: data && data[num] ? data[num][element] : ''
+                  children: currentData
                 }) : jsx(GoAFormItem, {
                   error: (_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : '',
                   mb: errorRow && !error && '2xl' || 'xs',
                   children: dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoAInput, {
+                    error: (error === null || error === void 0 ? void 0 : error.message.length) > 0,
                     type: dataObject.type === 'number' ? 'number' : 'text',
                     id: schemaName,
                     name: schemaName,
-                    value: data && data[num] ? data[num][element] : '',
+                    value: currentData,
                     testId: `#/properties/${schemaName}-input-${i}`,
                     onChange: (name, value) => {
                       handleChange(rowPath, {
@@ -7338,7 +7359,7 @@ const ObjectArrayControl = props => {
       });
       currentCategory.data = newCategoryData;
     }
-    if ((currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count) > 0) currentCategory.count--;
+    if ((currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count) && (currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count) > 0) currentCategory.count--;
     let handleChangeData = Object.keys(newCategoryData).map(key => {
       return newCategoryData[key];
     });
@@ -7354,12 +7375,14 @@ const ObjectArrayControl = props => {
       }
     });
   };
+  //eslint-disable-next-line
   const handleChangeWithData = (path, value) => {
+    var _a;
     if (path) {
       const categories = registers.categories;
-      const currentCategory = categories[path].data;
+      const currentCategory = ((_a = categories[path]) === null || _a === void 0 ? void 0 : _a.data) || {};
       const newData = {};
-      const allKeys = Object.keys(value).concat(Object.keys(currentCategory));
+      const allKeys = Object.keys(value).concat(Object.keys(currentCategory || []));
       const allKeysUnique = allKeys.filter((a, b) => allKeys.indexOf(a) === b);
       Object.keys(allKeysUnique).forEach(num => {
         if (!newData[num]) {
@@ -7369,7 +7392,7 @@ const ObjectArrayControl = props => {
           newData[num][path] = currentCategory[num][path];
         });
         value[num] && Object.keys(value[num]).forEach(path => {
-          newData[num][path] = value[num][path] || currentCategory[num] && currentCategory[num][path];
+          newData[num][path] = value[num][path] !== undefined ? value[num][path] : currentCategory[num] && currentCategory[num][path];
         });
       });
       const handleChangeData = Object.keys(newData).map(key => {
@@ -7410,8 +7433,10 @@ const ObjectArrayControl = props => {
     visible: visible,
     "data-testid": "jsonforms-object-list-wrapper",
     children: [jsxs(ToolBarHeader, {
-      children: [isInReview && listTitle && jsx("b", {
-        children: listTitle
+      children: [isInReview && listTitle && jsxs("b", {
+        children: [listTitle, " ", jsx("span", {
+          children: additionalProps.required && '(required)'
+        })]
       }), !isInReview && listTitle && jsxs(ObjectArrayTitle, {
         children: [listTitle, " ", jsx("span", {
           children: additionalProps.required && '(required)'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.53.8",
+  "version": "1.53.9",
   "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/Controls/ObjectArray/arrayData/actions.d.ts

@@ -7,7 +7,7 @@ export interface Categories {
     [category: string]: Category;
 }
 interface Category {
-    count: number;
+    count?: number;
     data: StateData;
 }
 interface Value {

package/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -3,6 +3,7 @@ export declare const DeleteDialogContent: import("styled-components/dist/types")
 export declare const NonEmptyCellStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ToolBarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ObjectArrayTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const RequiredSpan: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const TextCenter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SideMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const RowFlex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;