@abgov/jsonforms-components 2.38.2 → 2.38.3

package/index.esm.js

@@ -6450,8 +6450,8 @@ const RadioGroup = props => {
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options, options);
   return jsx(GoARadioGroup, Object.assign({
     error: isVisited && errors.length > 0,
-    name: `${options || appliedUiSchemaOptions.label}`,
-    testId: `${label || id}-jsonforms-radio`,
+    name: `${path || appliedUiSchemaOptions.label}`,
+    testId: `${path || id || label}-radio-group`,
     value: data,
     disabled: !enabled
   }, appliedUiSchemaOptions, {
@@ -7089,7 +7089,7 @@ let _$6 = t => t,
   _t20$1,
   _t21$1,
   _t22$1,
-  _t23,
+  _t23$1,
   _t24,
   _t25,
   _t26,
@@ -7248,7 +7248,7 @@ const TableReviewCategoryLabel = styled.h3(_t22$1 || (_t22$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t23 || (_t23 = _$6`
+const CategoryStatus = styled.td(_t23$1 || (_t23$1 = _$6`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
   align-content: center;
@@ -9930,7 +9930,8 @@ let _$3 = t => t,
   _t19,
   _t20,
   _t21,
-  _t22;
+  _t22,
+  _t23;
 const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
@@ -10047,6 +10048,15 @@ styled.div(_t21 || (_t21 = _$3`
 const HilightCellWarning = styled.div(_t22 || (_t22 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
+const FixTableHeaderAlignment = styled.div(_t23 || (_t23 = _$3`
+  table thead th:nth-child(3) {
+    text-align: center;
+  }
+
+  table tbody td:nth-child(3) {
+    text-align: center;
+  }
+`));
 
 const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
   open,
@@ -10375,140 +10385,145 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
         cells: cells
       }, rowPath);
     }), properties && Object.keys(properties).length > 0 && jsxs(Fragment, {
-      children: [jsxs(GoATable, {
-        width: "100%",
-        children: [jsx("thead", {
-          children: jsxs("tr", {
-            children: [Object.entries(tableKeys).map(([value, index]) => {
-              const currentProperty = properties[value];
-              if (!isInReview) {
-                return jsx("th", {
+      children: [jsx(FixTableHeaderAlignment, {
+        children: jsxs(GoATable, {
+          width: "100%",
+          children: [jsx("thead", {
+            children: jsxs("tr", {
+              children: [Object.entries(tableKeys).map(([value, index]) => {
+                const currentProperty = properties[value];
+                if (!isInReview) {
+                  return jsx("th", {
+                    children: jsxs("p", {
+                      children: [(currentProperty === null || currentProperty === void 0 ? void 0 : currentProperty.title) || convertToSentenceCase(index), (required === null || required === void 0 ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
+                        children: "(required)"
+                      })]
+                    })
+                  }, index);
+                }
+                return jsx(TableTHHeader, {
                   children: jsxs("p", {
-                    children: [(currentProperty === null || currentProperty === void 0 ? void 0 : currentProperty.title) || convertToSentenceCase(index), (required === null || required === void 0 ? void 0 : required.includes(value)) && jsx(RequiredSpan, {
-                      children: "(required)"
+                    children: [`${(currentProperty === null || currentProperty === void 0 ? void 0 : currentProperty.title) || convertToSentenceCase(index)}`, (required === null || required === void 0 ? void 0 : required.includes(value)) && jsxs(RequiredSpan, {
+                      children: [jsx("br", {}), " (required)"]
                     })]
                   })
                 }, index);
-              }
-              return jsx(TableTHHeader, {
-                children: jsxs("p", {
-                  children: [`${(currentProperty === null || currentProperty === void 0 ? void 0 : currentProperty.title) || convertToSentenceCase(index)}`, (required === null || required === void 0 ? void 0 : required.includes(value)) && jsxs(RequiredSpan, {
-                    children: [jsx("br", {}), " (required)"]
-                  })]
+              }), isInReview !== true && jsx("th", {
+                children: jsx("p", {
+                  children: "Actions"
                 })
-              }, index);
-            }), isInReview !== true && jsx("th", {
-              children: jsx("p", {
-                children: "Actions"
-              })
-            })]
-          }, 0)
-        }), jsx("tbody", {
-          children: range(count || 0).map((num, i) => {
-            const errorRow = errors === null || errors === void 0 ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
-            return jsxs("tr", {
-              children: [Object.keys(properties).map((element, ix) => {
-                var _a, _b;
-                const dataObject = properties[element];
-                const schemaName = element;
-                const currentData = data && data[num] ? data[num][element] : '';
-                //Get out of the loop to not render extra blank columns at the end of the table
-                if (ix > 1 && Object.keys(tableKeys).length === ix) return null;
-                const error = (errors === null || errors === void 0 ? void 0 : errors.filter(e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}` || e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}`)).find(y => {
-                  var _a;
-                  return ((_a = y === null || y === void 0 ? void 0 : y.message) === null || _a === void 0 ? void 0 : _a.includes(element)) || y.instancePath.includes(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`;
-                }
-                if (isInReview === true) {
+              })]
+            }, 0)
+          }), jsx("tbody", {
+            children: range(count || 0).map((num, i) => {
+              const errorRow = errors === null || errors === void 0 ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
+              return jsxs("tr", {
+                children: [Object.keys(properties).map((element, ix) => {
+                  var _a, _b;
+                  const dataObject = properties[element];
+                  const schemaName = element;
+                  const currentData = data && data[num] ? data[num][element] : '';
+                  //Get out of the loop to not render extra blank columns at the end of the table
+                  if (ix > 1 && Object.keys(tableKeys).length === ix) return null;
+                  const error = (errors === null || errors === void 0 ? void 0 : errors.filter(e => e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}/${element}` || e.instancePath === `/${props.rowPath.replace(/\./g, '/')}/${i}`)).find(y => {
+                    var _a;
+                    return ((_a = y === null || y === void 0 ? void 0 : y.message) === null || _a === void 0 ? void 0 : _a.includes(element)) || y.instancePath.includes(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`;
+                  }
+                  if (isInReview === true) {
+                    return jsx("td", {
+                      children: jsx("div", {
+                        "data-testid": `#/properties/${schemaName}-input-${i}-review`,
+                        style: {
+                          display: 'block'
+                        },
+                        children: renderCellColumn({
+                          data: currentData ? String(currentData) : undefined,
+                          error: error === null || error === void 0 ? void 0 : error.message,
+                          isRequired: (_a = required === null || required === void 0 ? void 0 : required.includes(tableKeys[element])) !== null && _a !== void 0 ? _a : false,
+                          errors: errors !== undefined ? errors : [],
+                          element,
+                          rowPath,
+                          index: i
+                        })
+                      })
+                    }, ix);
+                  }
                   return jsx("td", {
-                    children: jsx("div", {
-                      "data-testid": `#/properties/${schemaName}-input-${i}-review`,
-                      children: renderCellColumn({
-                        data: currentData ? String(currentData) : undefined,
-                        error: error === null || error === void 0 ? void 0 : error.message,
-                        isRequired: (_a = required === null || required === void 0 ? void 0 : required.includes(tableKeys[element])) !== null && _a !== void 0 ? _a : false,
-                        errors: errors !== undefined ? errors : [],
-                        element,
-                        rowPath,
-                        index: i
+                    children: jsx(GoAFormItem, {
+                      error: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : '',
+                      mb: errorRow && !error && '2xl' || 'xs',
+                      children: dataObject.enum ? jsxs(GoADropdown, {
+                        id: schemaName,
+                        name: schemaName,
+                        value: currentData != null ? String(currentData) : '',
+                        testId: `#/properties/${schemaName}-select-${i}`,
+                        onChange: (name, value) => {
+                          const selectedValue = Array.isArray(value) ? value[0] : value;
+                          const coerced = dataObject.type === 'number' && selectedValue !== '' ? Number(selectedValue) : selectedValue;
+                          handleChange(rowPath, {
+                            [num]: {
+                              [schemaName]: coerced
+                            }
+                          });
+                        },
+                        width: "100%",
+                        ariaLabel: schemaName,
+                        error: !!(error === null || error === void 0 ? void 0 : error.message),
+                        children: [!(required === null || required === void 0 ? void 0 : required.includes(schemaName)) && jsx(GoADropdownItem, {
+                          value: "",
+                          label: `-- Select ${convertToSentenceCase(schemaName)} --`
+                        }), dataObject.enum.map(opt => jsx(GoADropdownItem, {
+                          value: String(opt),
+                          label: String(opt)
+                        }, String(opt)))]
+                      }) : 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: currentData,
+                        testId: `#/properties/${schemaName}-input-${i}`,
+                        onChange: (name, value) => {
+                          handleChange(rowPath, {
+                            [num]: {
+                              [name]: dataObject.type === 'number' ? parseInt(value) : value
+                            }
+                          });
+                        },
+                        ariaLabel: schemaName,
+                        width: "100%"
+                      }) : jsx(GoACallout, {
+                        type: "important",
+                        size: "medium",
+                        testId: "form-support-callout",
+                        heading: "Not supported",
+                        children: "Only string, number, and enum are supported inside arrays"
                       })
                     })
                   }, ix);
-                }
-                return jsx("td", {
-                  children: jsx(GoAFormItem, {
-                    error: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : '',
-                    mb: errorRow && !error && '2xl' || 'xs',
-                    children: dataObject.enum ? jsxs(GoADropdown, {
-                      id: schemaName,
-                      name: schemaName,
-                      value: currentData != null ? String(currentData) : '',
-                      testId: `#/properties/${schemaName}-select-${i}`,
-                      onChange: (name, value) => {
-                        const selectedValue = Array.isArray(value) ? value[0] : value;
-                        const coerced = dataObject.type === 'number' && selectedValue !== '' ? Number(selectedValue) : selectedValue;
-                        handleChange(rowPath, {
-                          [num]: {
-                            [schemaName]: coerced
-                          }
-                        });
-                      },
-                      width: "100%",
-                      ariaLabel: schemaName,
-                      error: !!(error === null || error === void 0 ? void 0 : error.message),
-                      children: [!(required === null || required === void 0 ? void 0 : required.includes(schemaName)) && jsx(GoADropdownItem, {
-                        value: "",
-                        label: `-- Select ${convertToSentenceCase(schemaName)} --`
-                      }), dataObject.enum.map(opt => jsx(GoADropdownItem, {
-                        value: String(opt),
-                        label: String(opt)
-                      }, String(opt)))]
-                    }) : 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: currentData,
-                      testId: `#/properties/${schemaName}-input-${i}`,
-                      onChange: (name, value) => {
-                        handleChange(rowPath, {
-                          [num]: {
-                            [name]: dataObject.type === 'number' ? parseInt(value) : value
-                          }
-                        });
-                      },
-                      ariaLabel: schemaName,
-                      width: "100%"
-                    }) : jsx(GoACallout, {
-                      type: "important",
-                      size: "medium",
-                      testId: "form-support-callout",
-                      heading: "Not supported",
-                      children: "Only string, number, and enum are supported inside arrays"
+                }), !isInReview && jsx("td", {
+                  style: {
+                    alignContent: 'baseLine',
+                    paddingTop: '18px'
+                  },
+                  children: jsx("div", {
+                    "aria-hidden": "true",
+                    children: jsx(GoAIconButton, {
+                      icon: "trash",
+                      title: "trash button",
+                      testId: "trash-icon-button",
+                      "aria-label": `remove-element-${num}`,
+                      onClick: () => openDeleteDialog(num)
                     })
                   })
-                }, ix);
-              }), !isInReview && jsx("td", {
-                style: {
-                  alignContent: 'baseLine',
-                  paddingTop: '18px'
-                },
-                children: jsx("div", {
-                  "aria-hidden": "true",
-                  children: jsx(GoAIconButton, {
-                    icon: "trash",
-                    title: "trash button",
-                    testId: "trash-icon-button",
-                    "aria-label": `remove-element-${num}`,
-                    onClick: () => openDeleteDialog(num)
-                  })
-                })
-              })]
-            }, `${rowPath}-${i}-${num}`);
-          })
-        })]
+                })]
+              }, `${rowPath}-${i}-${num}`);
+            })
+          })]
+        })
       }), hasAnyErrors && isInReview && jsx(GoAFormItem, {
         error: `There are validation errors for '${capitalizeFirstLetter(rowPath)}'`
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.38.2",
+  "version": "2.38.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/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -22,3 +22,4 @@ export declare const ListWithDetailWarningIconDiv: import("styled-components/dis
 export declare const ObjectArrayRequiredTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export declare const HasErrorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const HilightCellWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FixTableHeaderAlignment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;