@abgov/jsonforms-components 2.1.1 → 2.1.2

package/index.esm.js

@@ -8,7 +8,7 @@ import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, getControlPath, toDataPath, deriveLabelForUISchemaElement, isEnabled, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, schemaMatches, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import * as _$c from 'lodash';
-import { isEqual, isObject as isObject$f } from 'lodash';
+import { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
@@ -4391,7 +4391,7 @@ const formatSin = value => {
   return formatVal;
 };
 const GoAInputText = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
   const {
     data,
     config,
@@ -4406,14 +4406,15 @@ const GoAInputText = props => {
     isVisited,
     setIsVisited
   } = props;
+  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : '100%';
   const registerCtx = useContext(JsonFormsRegisterContext);
-  const registerConfig = fetchRegisterConfigFromOptions$1((_b = (_a = props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.register);
+  const registerConfig = fetchRegisterConfigFromOptions$1((_e = (_d = props.uischema) === null || _d === void 0 ? void 0 : _d.options) === null || _e === void 0 ? void 0 : _e.register);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   let registerData = [];
   if (registerConfig) {
     registerData = registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.selectRegisterData(registerConfig);
   }
-  const autoCompletion = ((_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.autoComplete) === true;
+  const autoCompletion = ((_g = (_f = props.uischema) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.autoComplete) === true;
   const mergedOptions = useMemo(() => {
     const newOptions = [...((registerData === null || registerData === void 0 ? void 0 : registerData.map(d => {
       if (typeof d === 'string') {
@@ -4445,8 +4446,8 @@ const GoAInputText = props => {
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const isSinField = schema.title === sinTitle;
-  const autoCapitalize = ((_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true || ((_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.autoCapitalize) === true;
-  const readOnly = (_k = (_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.readOnly) !== null && _k !== void 0 ? _k : false;
+  const autoCapitalize = ((_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.autoCapitalize) === true || ((_k = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _k === void 0 ? void 0 : _k.autoCapitalize) === true;
+  const readOnly = (_o = (_m = (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps) === null || _m === void 0 ? void 0 : _m.readOnly) !== null && _o !== void 0 ? _o : false;
   return jsx("div", {
     children: mergedOptions.length > 0 ? jsx(Dropdown, {
       items: mergedOptions,
@@ -4463,11 +4464,11 @@ const GoAInputText = props => {
       type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
       disabled: !enabled,
       value: data,
-      width: '100%',
+      width: width,
       readonly: readOnly,
       maxLength: isSinField ? 11 : '',
       placeholder: placeholder
-    }, (_l = uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps, {
+    }, (_p = uischema.options) === null || _p === void 0 ? void 0 : _p.componentProps, {
       // 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`,
@@ -4495,7 +4496,7 @@ const GoAInputText = props => {
           value: autoCapitalize ? value.toUpperCase() : value
         });
       }
-    }, (_m = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _m === void 0 ? void 0 : _m.componentProps))
+    }, (_q = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _q === void 0 ? void 0 : _q.componentProps))
   });
 };
 const GoATextControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -4525,7 +4526,7 @@ const MultiLineText = props => {
   const [textAreaValue, _] = React.useState(data);
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
-  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : '100%';
+  const width = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : '100%';
   const autoCapitalize = ((_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps) === null || _e === void 0 ? void 0 : _e.autoCapitalize) === true || ((_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.autoCapitalize) === true;
   const readOnly = (_j = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps) === null || _h === void 0 ? void 0 : _h.readOnly) !== null && _j !== void 0 ? _j : false;
   const textAreaName = `${label || path}-text-area` || '';
@@ -7379,6 +7380,7 @@ const ListContainer = styled.div(_t14 || (_t14 = _$2`
 `));
 const TableTHHeader = styled.th(_t15 || (_t15 = _$2`
   background-color: var(--goa-color-greyscale-100) !important;
+  vertical-align: top;
 `));
 const ObjectArrayWarningIconDiv = styled.div(_t16 || (_t16 = _$2`
   display: inline-flex;
@@ -7483,6 +7485,21 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
   });
 });
 
+const extractNestedFields = (properties, propertyKeys) => {
+  const nestedItems = {};
+  propertyKeys.forEach(key => {
+    var _a, _b;
+    if (properties[key].type === 'array') {
+      const propItems = properties[key] && ((_a = properties[key].items) === null || _a === void 0 ? void 0 : _a.properties) || [];
+      const propReqItems = properties[key].items && ((_b = properties[key].items) === null || _b === void 0 ? void 0 : _b.required) || [];
+      nestedItems[key] = {
+        properties: [...Object.keys(propItems)],
+        required: [...Object.keys(propReqItems)]
+      };
+    }
+  });
+  return nestedItems;
+};
 /**
  * Extract Json data schema name attribute and the ui schema label name.
  * @param obj
@@ -7507,9 +7524,17 @@ const extractNames = (obj, names = {}) => {
   }
   return names;
 };
+const isObjectArrayEmpty = currentData => {
+  const result = isEmpty$1(currentData) || JSON.stringify(currentData) === '[{}]';
+  return result;
+};
 const renderCellColumn = ({
   currentData,
   error,
+  errors,
+  index,
+  rowPath,
+  element,
   isRequired
 }) => {
   const renderWarningCell = data => {
@@ -7531,12 +7556,18 @@ const renderCellColumn = ({
   } else if (currentData !== undefined && isRequired && error) {
     return renderWarningCell(currentData);
   }
+  const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
+  const nestedErrors = errors === null || errors === void 0 ? void 0 : errors.filter(e => e.instancePath.includes(path));
   if (typeof currentData === 'string') {
     return currentData;
   } else if (typeof currentData === 'object' || Array.isArray(currentData)) {
     const result = Object.keys(currentData);
     if (result.length === 0) {
       return renderWarningCell();
+    } else if (result.length > 0 && (isObjectArrayEmpty(currentData) || nestedErrors.length > 0)) {
+      return jsx("pre", {
+        children: renderWarningCell(JSON.stringify(currentData, null, 2))
+      });
     } else if (currentData !== undefined && result.length > 0 && error !== '' && error !== undefined) {
       const values = Object.values(currentData);
       if (values && values.length > 0) {
@@ -7646,6 +7677,8 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
   } = 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;
+  const propertyKeys = Object.keys(properties);
+  const nestedItems = extractNestedFields(properties, propertyKeys);
   let tableKeys = extractNames((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.detail);
   if (Object.keys(tableKeys).length === 0) {
     Object.keys(properties).forEach(item => {
@@ -7682,6 +7715,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
         children: [jsx("thead", {
           children: jsxs("tr", {
             children: [Object.entries(tableKeys).map(([value, index]) => {
+              var _a;
               if (!isInReview) {
                 return jsx("th", {
                   children: jsxs("p", {
@@ -7693,7 +7727,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
               }
               return jsx(TableTHHeader, {
                 children: jsxs("p", {
-                  children: [`${convertToSentenceCase(index)}`, (required === null || required === void 0 ? void 0 : required.includes(value)) && jsxs(RequiredSpan, {
+                  children: [`${convertToSentenceCase(index)}`, ((required === null || required === void 0 ? void 0 : required.includes(value)) || ((_a = nestedItems[value]) === null || _a === void 0 ? void 0 : _a.required.length) > 0) && jsxs(RequiredSpan, {
                     children: [jsx("br", {}), " (required)"]
                   })]
                 })
@@ -7729,7 +7763,12 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                       children: renderCellColumn({
                         currentData,
                         error: error === null || error === void 0 ? void 0 : error.message,
-                        isRequired: required === null || required === void 0 ? void 0 : required.includes(tableKeys[element])
+                        isRequired: required === null || required === void 0 ? void 0 : required.includes(tableKeys[element]),
+                        errors: errors !== undefined ? errors : [],
+                        count: count !== undefined ? count : -1,
+                        element,
+                        rowPath,
+                        index: i
                       })
                     })
                   }, ix);
@@ -7779,7 +7818,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                   })
                 })
               })]
-            }, `${i}-${num}`);
+            }, `${rowPath}-${i}-${num}`);
           })
         })]
       }), hasAnyErrors && isInReview && jsx(GoAFormItem, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.1.1",
+  "version": "2.1.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/Controls/ObjectArray/ObjectListControlTypes.d.ts

@@ -11,10 +11,15 @@ export interface DataProperty {
     maxLength?: number;
     required?: string[];
     enum: string[];
+    items?: Record<string, unknown>;
 }
 export interface DataObject {
     [key: string]: DataProperty;
 }
+export interface NestedItem {
+    properties: string[];
+    required: string[];
+}
 export interface Items {
     type: string;
     properties: DataObject;
@@ -96,4 +101,9 @@ export interface RenderCellColumnProps {
     error: string | undefined;
     isRequired: boolean;
     tableKeys?: string[];
+    errors: ErrorObject[];
+    count: number;
+    rowPath: string;
+    index: number;
+    element: string;
 }

package/src/lib/Controls/ObjectArray/ObjectListControlUtils.d.ts

@@ -1,4 +1,5 @@
-import { RenderCellColumnProps } from './ObjectListControlTypes';
+import { DataObject, NestedItem, RenderCellColumnProps } from './ObjectListControlTypes';
+export declare const extractNestedFields: (properties: DataObject, propertyKeys: string[]) => Record<string, NestedItem>;
 /**
  * Extract Json data schema name attribute and the ui schema label name.
  * @param obj
@@ -6,4 +7,5 @@ import { RenderCellColumnProps } from './ObjectListControlTypes';
  * @returns A key value of the data attribute name and the uiSchema label value
  */
 export declare const extractNames: (obj: unknown, names?: Record<string, string>) => Record<string, string>;
-export declare const renderCellColumn: ({ currentData, error, isRequired }: RenderCellColumnProps) => string | import("react/jsx-runtime").JSX.Element | null;
+export declare const isObjectArrayEmpty: (currentData: string) => boolean;
+export declare const renderCellColumn: ({ currentData, error, errors, index, rowPath, element, isRequired, }: RenderCellColumnProps) => string | import("react/jsx-runtime").JSX.Element | null;