@abgov/jsonforms-components 1.25.2 → 1.25.4

package/index.esm.js

@@ -3463,7 +3463,7 @@ const GoATextControlTester = rankWith(1, isStringControl);
 const GoAInputTextControl = withJsonFormsControlProps(GoATextControl);
 
 const MultiLineText = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const {
     data,
     config,
@@ -3482,10 +3482,11 @@ const MultiLineText = 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 errorsFormInput = checkFieldValidity(props);
-  const autoCapitalize = ((_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.autoCapitalize) === true || ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autoCapitalize) === true;
-  const readOnly = (_f = (_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.readOnly) !== null && _f !== void 0 ? _f : false;
+  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 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` || '';
-  const textarea = (_g = document.getElementsByName(textAreaName)[0]) !== null && _g !== void 0 ? _g : null;
+  const textarea = (_k = document.getElementsByName(textAreaName)[0]) !== null && _k !== void 0 ? _k : null;
   useEffect(() => {
     if (textarea) {
       textarea.addEventListener('blur', onBlur);
@@ -3516,7 +3517,7 @@ const MultiLineText = props => {
     placeholder: placeholder,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     name: textAreaName,
-    width: '100%',
+    width: width,
     // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
     // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
@@ -3536,7 +3537,7 @@ const MultiLineText = props => {
         handleChange(path, newValue);
       }
     }
-  }, (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps));
+  }, (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps));
   return txtAreaComponent;
 };
 const MultiLineTextControlInput = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -3592,7 +3593,7 @@ const reformatDateProps = props => {
   return newProps;
 };
 const GoADateInput = props => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const {
     data,
     config,
@@ -3605,17 +3606,18 @@ const GoADateInput = props => {
   } = props;
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const readOnly = (_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 : false;
-  const minDate = (_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.min;
+  const width = (_f = (_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.width) !== null && _f !== void 0 ? _f : '100%';
+  const minDate = (_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.min;
   if (minDate && !isValidDateFormat(minDate)) {
     return invalidDateFormat(uischema.scope, 'Min');
   }
-  const maxDate = (_g = (_f = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _f === void 0 ? void 0 : _f.componentProps) === null || _g === void 0 ? void 0 : _g.max;
+  const maxDate = (_k = (_j = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _j === void 0 ? void 0 : _j.componentProps) === null || _k === void 0 ? void 0 : _k.max;
   if (maxDate && !isValidDateFormat(maxDate)) {
     return invalidDateFormat(uischema.scope, 'Max');
   }
   return jsx(GoAInputDate, Object.assign({
     error: checkFieldValidity(props).length > 0,
-    width: "100%",
+    width: width,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     value: standardizeDate(data) || '',
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
@@ -3643,7 +3645,7 @@ const GoADateInput = props => {
         controlProps: props
       });
     }
-  }, reformatDateProps((_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps)));
+  }, reformatDateProps((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps)));
 };
 const GoADateControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoADateInput
@@ -3759,7 +3761,7 @@ if ($stringify) {
 }
 
 const GoANumberInput = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   // eslint-disable-next-line
   const {
     data,
@@ -3781,6 +3783,7 @@ const GoANumberInput = props => {
   const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
   const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
   const readOnly = (_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 : false;
+  const width = (_f = (_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.width) !== null && _f !== void 0 ? _f : '100%';
   const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInput, Object.assign({
     type: "number",
@@ -3792,7 +3795,7 @@ const GoANumberInput = props => {
     step: StepValue,
     min: MinValue,
     max: MaxValue,
-    width: "100%",
+    width: width,
     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`,
     onKeyPress: (name, value, key) => {
@@ -3817,7 +3820,7 @@ const GoANumberInput = props => {
         controlProps: props
       });
     }
-  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
 const GoANumberControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoANumberInput
@@ -3826,7 +3829,7 @@ const GoANumberControlTester = rankWith(2, isNumberControl);
 const GoAInputNumberControl = withJsonFormsControlProps(GoANumberControl);
 
 const GoAInputInteger = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   // eslint-disable-next-line
   const {
     data,
@@ -3848,11 +3851,12 @@ const GoAInputInteger = props => {
   const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
   const MaxValue = clonedSchema.exclusiveMaximum ? clonedSchema.exclusiveMaximum : '';
   const readOnly = (_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 : false;
+  const width = (_f = (_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.width) !== null && _f !== void 0 ? _f : '100%';
   const errorsFormInput = checkFieldValidity(props);
   return jsx(GoAInput, Object.assign({
     type: "number",
     error: errorsFormInput.length > 0,
-    width: "100%",
+    width: width,
     disabled: !enabled,
     readonly: readOnly,
     value: InputValue,
@@ -3884,7 +3888,7 @@ const GoAInputInteger = props => {
         controlProps: props
       });
     }
-  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
 const GoAIntegerControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoAInputInteger
@@ -3893,7 +3897,7 @@ const GoAIntegerControlTester = rankWith(2, isIntegerControl);
 const GoAInputIntegerControl = withJsonFormsControlProps(GoAIntegerControl);
 
 const GoADateTimeInput = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   // eslint-disable-next-line
   const {
     data,
@@ -3910,9 +3914,10 @@ const GoADateTimeInput = props => {
   } = props;
   const appliedUiSchemaOptions = Object.assign(Object.assign({}, config), uischema === null || uischema === void 0 ? void 0 : uischema.options);
   const readOnly = (_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 : false;
+  const width = (_f = (_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.width) !== null && _f !== void 0 ? _f : '100%';
   return jsx(GoAInputDateTime, Object.assign({
     error: checkFieldValidity(props).length > 0,
-    width: "100%",
+    width: width,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     value: data ? new Date(data).toISOString() : '',
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
@@ -3940,7 +3945,7 @@ const GoADateTimeInput = props => {
         controlProps: props
       });
     }
-  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
 const GoADateTimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoADateTimeInput
@@ -3949,7 +3954,7 @@ const GoADateTimeControlTester = rankWith(2, isDateTimeControl);
 const GoAInputDateTimeControl = withJsonFormsControlProps(GoADateTimeControl);
 
 const GoATimeInput = props => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   // eslint-disable-next-line
   const {
     data,
@@ -3967,12 +3972,13 @@ const GoATimeInput = props => {
   (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.placeholder) || (schema === null || schema === void 0 ? void 0 : schema.description) || '';
   const readOnly = (_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 : false;
   const errorsFormInput = checkFieldValidity(props);
+  const width = (_f = (_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.readOnly) !== null && _f !== void 0 ? _f : '100%';
   return jsx(GoAInputTime, Object.assign({
     error: errorsFormInput.length > 0,
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     value: data,
     step: 1,
-    width: "100%",
+    width: width,
     disabled: !enabled,
     readonly: readOnly,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
@@ -3995,7 +4001,7 @@ const GoATimeInput = props => {
         controlProps: props
       });
     }
-  }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
+  }, (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.componentProps));
 };
 const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props, {
   input: GoATimeInput
@@ -5865,7 +5871,8 @@ const ArrayBaseReviewControl = props => {
     visible: visible,
     children: jsx(ObjectArrayControl, Object.assign({}, props, {
       openDeleteDialog: () => {},
-      isStepperReview: true
+      isStepperReview: true,
+      enabled: true
     }))
   });
 };
@@ -6056,7 +6063,7 @@ const LeftTab = ({
   translations
 }) => {
   return jsx("div", {
-    children: enabled ? jsx(SideMenuItem, {
+    children: jsx(SideMenuItem, {
       style: currentTab === rowIndex ? {
         background: '#EFF8FF'
       } : {},
@@ -6064,15 +6071,15 @@ const LeftTab = ({
       children: jsxs(RowFlexMenu, {
         children: [jsx(TabName, {
           children: name
-        }), jsx(Trash, {
+        }), enabled ? jsx(Trash, {
           children: jsx(GoAIconButton, {
             icon: "trash",
             "aria-label": translations.removeAriaLabel,
             onClick: () => openDeleteDialog(childPath, rowIndex, name)
           })
-        })]
+        }) : null]
       })
-    }) : null
+    })
   }, childPath);
 };
 const NonEmptyList = /*#__PURE__*/React.memo(NonEmptyRowComponent);
@@ -6090,11 +6097,12 @@ const ObjectArrayList = ({
   const isEmptyList = data === 0;
   const rightRef = useRef(null);
   const current = rightRef.current;
-  const [rightHeight, setRightHeight] = useState(0);
+  const minHeight = 300;
+  const [rightHeight, setRightHeight] = useState(minHeight);
   const [currentTab, setCurrentTab] = useState(0);
   useEffect(() => {
-    const resizeObserver = new ResizeObserver(entries => {
-      if (rightHeight !== (current === null || current === void 0 ? void 0 : current.offsetHeight)) setRightHeight(current === null || current === void 0 ? void 0 : current.offsetHeight);
+    const resizeObserver = new ResizeObserver(() => {
+      if (rightHeight !== (current === null || current === void 0 ? void 0 : current.offsetHeight) && (current === null || current === void 0 ? void 0 : current.offsetHeight)) setRightHeight((current === null || current === void 0 ? void 0 : current.offsetHeight) > minHeight ? current === null || current === void 0 ? void 0 : current.offsetHeight : minHeight);
     });
     if (current) {
       resizeObserver.observe(current);
@@ -6105,7 +6113,7 @@ const ObjectArrayList = ({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [current]);
+  }, [current, rightHeight, rightRef]);
   if (isEmptyList) {
     return jsx(EmptyList, {
       numColumns: getValidColumnProps(schema).length + 1,
@@ -6125,7 +6133,7 @@ const ObjectArrayList = ({
         },
         children: range(data).map(index => {
           const childPath = Paths.compose(path, `${index}`);
-          const name = `${index}: ${path}`;
+          const name = `${path} ${index + 1}`;
           return jsx(LeftTab, {
             childPath: childPath,
             rowIndex: index,
@@ -6247,7 +6255,8 @@ const ListWithDetailsControl = props => {
   return jsxs(Visible, {
     visible: visible,
     children: [jsx(ListWithDetailControl, Object.assign({}, props, {
-      openDeleteDialog: openDeleteDialog
+      openDeleteDialog: openDeleteDialog,
+      enabled: true
     })), jsx(DeleteDialog, {
       open: open,
       onCancel: deleteCancel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.25.2",
+  "version": "1.25.4",
   "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",