@abgov/jsonforms-components 1.53.7 → 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.
@@ -4062,7 +4062,7 @@ let _$8 = t => t,
   _t$8,
   _t2$5,
   _t3$4,
-  _t4$3;
+  _t4$4;
 const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
@@ -4102,7 +4102,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$3 || (_t4$3 = _$8`
+const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -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 !== '') {
@@ -5363,7 +5360,7 @@ let _$5 = t => t,
   _t$5,
   _t2$4,
   _t3$3,
-  _t4$2,
+  _t4$3,
   _t5$2,
   _t6$2,
   _t7$1,
@@ -5399,7 +5396,7 @@ const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t4$2 || (_t4$2 = _$5`
+const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$5`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
@@ -6385,7 +6382,8 @@ const DeleteFileModal = ({
 let _$3 = t => t,
   _t$3,
   _t2$3,
-  _t3$2;
+  _t3$2,
+  _t4$2;
 const DELAY_UPLOAD_TIMEOUT_MS = 5;
 const DELAY_DELETE_TIMEOUT_MS = 5;
 const FileUploaderReview = props => {
@@ -6394,7 +6392,7 @@ const FileUploaderReview = props => {
   }));
 };
 const FileUploader = _a => {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   var {
       data,
       path,
@@ -6467,6 +6465,7 @@ const FileUploader = _a => {
   if (!enumerators) {
     return jsx(Fragment, {});
   }
+  const helpText = (_p = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _p === void 0 ? void 0 : _p.help;
   const sentenceCaseLabel = convertToSentenceCase(label);
   return jsxs(FileUploaderStyle, {
     id: "file-upload",
@@ -6485,6 +6484,8 @@ const FileUploader = _a => {
         maxFileSize: maxFileSize,
         accept: accept
       })
+    }), helpText && jsx(HelpText, {
+      children: helpText
     }), jsx("div", {
       children: Array.isArray(data) && data[0] === 'Loading' ? jsx(GoAModal, {
         open: Array.isArray(data) && data[0] === 'Loading',
@@ -6542,7 +6543,12 @@ const FileUploader = _a => {
     })]
   });
 };
-const AttachmentBorderDisabled = styled.div(_t$3 || (_t$3 = _$3`
+const HelpText = styled.div(_t$3 || (_t$3 = _$3`
+  margin-top: var(--goa-space-xs);
+  font-size: var(--goa-font-size-3);
+  color: var(--goa-color-text-secondary);
+`));
+const AttachmentBorderDisabled = styled.div(_t2$3 || (_t2$3 = _$3`
   display: flex;
   flex-direction: row;
   border: var(--goa-border-width-s) solid #dcdcdc;
@@ -6551,7 +6557,7 @@ const AttachmentBorderDisabled = styled.div(_t$3 || (_t$3 = _$3`
   width: fit-content;
   background-color: #f1f1f1;
 `));
-const AttachmentBorder = styled.div(_t2$3 || (_t2$3 = _$3`
+const AttachmentBorder = styled.div(_t3$2 || (_t3$2 = _$3`
   display: flex;
   flex-direction: row;
   border: var(--goa-border-width-s) solid #dcdcdc;
@@ -6560,7 +6566,7 @@ const AttachmentBorder = styled.div(_t2$3 || (_t2$3 = _$3`
   width: fit-content;
   margin-top: var(--goa-space-2xs);
 `));
-const FileUploaderStyle = styled.div(_t3$2 || (_t3$2 = _$3`
+const FileUploaderStyle = styled.div(_t4$2 || (_t4$2 = _$3`
   margin-bottom: var(--goa-space-l);
   .label {
     display: block;
@@ -6784,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);
 `));
@@ -6804,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;
 `));
 
@@ -6919,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}`)
       })
     })
   });
@@ -6946,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
         });
@@ -7081,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,
@@ -7098,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,
@@ -7118,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);
             }
@@ -7143,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, {
@@ -7329,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];
     });
@@ -7345,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]) {
@@ -7360,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 => {
@@ -7401,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.7",
+  "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;