@abgov/jsonforms-components 2.9.1 → 2.11.0

package/index.esm.js

@@ -3050,6 +3050,7 @@ $$l({ target: 'Iterator', proto: true, real: true, forced: IS_PURE$1 }, {
 
 const sinTitle = 'Social insurance number';
 const invalidSin = 'Social insurance number is invalid';
+const DEFAULT_MAX_ITEMS = 50;
 
 /**
  * Sets the first word to be capitalized so that it is sentence cased.
@@ -6646,7 +6647,7 @@ const warningIcon = errorMessage => {
   });
 };
 const GoABaseInputReviewComponent = props => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   // eslint-disable-next-line
   const {
     data,
@@ -6695,11 +6696,7 @@ const GoABaseInputReviewComponent = props => {
     if (((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.radio) === true) {
       reviewText = data ? `Yes` : `No`;
     } else {
-      if (label !== '' || typeof label === 'boolean') {
-        reviewText = data ? `Yes` : `No`;
-      } else {
-        reviewText = data ? `Yes (${checkboxLabel.trim()})` : `No (${checkboxLabel.trim()})`;
-      }
+      reviewText = data ? `Yes (${checkboxLabel.trim()})` : `No (${checkboxLabel.trim()})`;
     }
   }
   if (isTime) {
@@ -6708,6 +6705,24 @@ const GoABaseInputReviewComponent = props => {
   if (isDateTime) {
     reviewText = reviewText && UTCToFullLocalTime(reviewText);
   }
+  if (Array.isArray(data) && data.length > 0) {
+    reviewText = jsx("ul", {
+      children: data.map((checkbox, index) => {
+        var _a, _b;
+        const checkboxLabel = ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.trim()) || convertToSentenceCase(getLastSegmentFromPointer(uischema.scope));
+        return jsx("li", {
+          children: checkbox.trim() || checkboxLabel.trim()
+        }, index);
+      })
+    });
+  } else if (data === undefined || data === false) {
+    const checkboxLabel = ((_e = (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.trim()) || convertToSentenceCase(getLastSegmentFromPointer(uischema.scope));
+    reviewText = jsx("ul", {
+      children: jsx("li", {
+        children: `No (${checkboxLabel.trim()})`
+      })
+    });
+  }
   return jsxs("div", {
     style: {
       fontWeight: '400',
@@ -8585,7 +8600,7 @@ const FileUploader = _ref => {
       uischema
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   const enumerators = useContext(JsonFormContext);
   const uploadTriggerFunction = (_a = enumerators === null || enumerators === void 0 ? void 0 : enumerators.functions) === null || _a === void 0 ? void 0 : _a.get('upload-file');
   const uploadTrigger = uploadTriggerFunction && uploadTriggerFunction();
@@ -8608,9 +8623,10 @@ const FileUploader = _ref => {
   } = props;
   const propertyId = i18nKeyPrefix;
   const variant = ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.variant) || 'button';
+  const noDownloadButton = (_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.format) === null || _f === void 0 ? void 0 : _f.noDownloadButton;
   const multiFileUploader = variant === 'dragdrop';
   const [deleteHide, setDeleteHide] = useState(false);
-  const fileListLength = fileList && ((_e = fileList[props.i18nKeyPrefix]) === null || _e === void 0 ? void 0 : _e.length) || 0;
+  const fileListLength = fileList && ((_g = fileList[props.i18nKeyPrefix]) === null || _g === void 0 ? void 0 : _g.length) || 0;
   function uploadFile(file) {
     if (uploadTrigger) {
       if (!multiFileUploader) {
@@ -8666,13 +8682,13 @@ const FileUploader = _ref => {
     const timeoutId = setTimeout(delayedFunction, 1);
     return () => clearTimeout(timeoutId);
   }, [handleChange, fileList, propertyId]);
-  const readOnly = ((_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.readOnly) === true || (props === null || props === void 0 ? void 0 : props.isStepperReview) === true || user === null;
-  const maxFileSize = (_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.maxFileSize) !== null && _k !== void 0 ? _k : '';
-  const accept = (_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.accept) !== null && _o !== void 0 ? _o : '';
+  const readOnly = ((_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) === true || (props === null || props === void 0 ? void 0 : props.isStepperReview) === true || user === null;
+  const maxFileSize = (_m = (_l = (_k = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _k === void 0 ? void 0 : _k.componentProps) === null || _l === void 0 ? void 0 : _l.maxFileSize) !== null && _m !== void 0 ? _m : '';
+  const accept = (_q = (_p = (_o = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _o === void 0 ? void 0 : _o.componentProps) === null || _p === void 0 ? void 0 : _p.accept) !== null && _q !== void 0 ? _q : '';
   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 helpText = (_r = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _r === void 0 ? void 0 : _r.help;
   const sentenceCaseLabel = convertToSentenceCase(label);
   const DownloadFileWidget = ({
     index
@@ -8696,7 +8712,7 @@ const FileUploader = _ref => {
             title: "Download",
             type: "download",
             onClick: () => downloadFile(getFile(index))
-          }), jsx(GoAContextMenuIcon, {
+          }), noDownloadButton !== true && jsx(GoAContextMenuIcon, {
             "data-testid": "delete-icon",
             title: "Delete",
             type: "trash",
@@ -9582,6 +9598,7 @@ const ObjectArrayControl = props => {
   const [registers, dispatch] = useReducer(objectListReducer, initialState);
   const [open, setOpen] = useState(false);
   const [rowData, setRowData] = useState(0);
+  const [maxItemsError, setMaxItemsError] = useState('');
   const {
       label,
       path,
@@ -9612,11 +9629,23 @@ const ObjectArrayControl = props => {
   };
   //  eslint-disable-next-line
   const addItem = (path, value) => {
-    dispatch({
-      type: INCREMENT_ACTION,
-      payload: path
-    });
-    return () => props.addItem(path, value);
+    var _a, _b, _c, _d;
+    const maxItems = ((_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.maxItems) ? (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.detail) === null || _d === void 0 ? void 0 : _d.maxItems : DEFAULT_MAX_ITEMS;
+    const categories = registers.categories;
+    const currentCategory = categories[path];
+    const count = (currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count) !== undefined ? currentCategory === null || currentCategory === void 0 ? void 0 : currentCategory.count : 0;
+    if (count < maxItems) {
+      dispatch({
+        type: INCREMENT_ACTION,
+        payload: path
+      });
+      return () => props.addItem(path, value);
+    } else {
+      setMaxItemsError(`Maximum ${maxItems} items allowed.`);
+      setTimeout(() => {
+        setMaxItemsError('');
+      }, 3000);
+    }
   };
   // eslint-disable-next-line
   const deleteItem = (path, value) => {
@@ -9637,6 +9666,7 @@ const ObjectArrayControl = props => {
     if (handleChangeData.length === 0) {
       handleChangeData = null;
     }
+    setMaxItemsError('');
     props.handleChange(path, handleChangeData);
     dispatch({
       type: DELETE_ACTION,
@@ -9718,6 +9748,12 @@ const ObjectArrayControl = props => {
       }) : jsxs("b", {
         children: [listTitle, " ", jsx("span", {
           children: additionalProps.required && '(required)'
+        }), maxItemsError && jsx("span", {
+          style: {
+            color: 'red',
+            marginLeft: '1rem'
+          },
+          children: maxItemsError
         })]
       }), !isInReview && listTitle && jsxs(ObjectArrayTitle, {
         children: [listTitle, " ", jsx("span", {
@@ -10155,20 +10191,37 @@ const ObjectArrayList = ({
 class ListWithDetailControl extends React.Component {
   constructor() {
     super(...arguments);
+    this.state = {
+      maxItemsError: ''
+    };
     // eslint-disable-next-line
     this.addItem = (path, value) => {
+      var _a, _b, _c;
       const {
         data,
         addItem,
-        setCurrentTab
+        setCurrentTab,
+        uischema
       } = this.props;
       const isNonEmpty = data !== undefined && data !== null;
       const newIndex = isNonEmpty ? data !== null && data !== void 0 ? data : 0 : 0;
-      if (addItem) {
-        addItem(path, value)();
-      }
-      if (typeof setCurrentTab === 'function') {
-        setCurrentTab(newIndex);
+      const maxItems = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.maxItems) !== null && _c !== void 0 ? _c : DEFAULT_MAX_ITEMS;
+      if (data < maxItems) {
+        if (addItem) {
+          addItem(path, value)();
+        }
+        if (typeof setCurrentTab === 'function') {
+          setCurrentTab(newIndex);
+        }
+      } else {
+        this.setState({
+          maxItemsError: `Maximum ${maxItems} items allowed.`
+        });
+        setTimeout(() => {
+          this.setState({
+            maxItemsError: ''
+          });
+        }, 3000);
       }
     };
   }
@@ -10201,6 +10254,12 @@ class ListWithDetailControl extends React.Component {
         children: [listTitle && jsxs(ObjectArrayTitle, {
           children: [listTitle, " ", jsx("span", {
             children: additionalProps.required && '(required)'
+          }), this.state.maxItemsError && jsx("span", {
+            style: {
+              color: 'red',
+              marginLeft: '1rem'
+            },
+            children: this.state.maxItemsError
           })]
         }), jsx(ObjectArrayToolBar, {
           errors: errors,
@@ -11803,7 +11862,10 @@ const GoAHorizontalLayoutComponent = ({
     enabled,
     direction: 'row',
     visible,
-    width: '10ch'
+    width: '10ch',
+    option: {
+      space: 'xl'
+    }
   };
   return jsx(LayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,
@@ -11828,7 +11890,10 @@ const GoAHorizontalReviewLayoutComponent = ({
     enabled,
     direction: 'row',
     visible,
-    width: ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.review) === null || _b === void 0 ? void 0 : _b.width) || '30ch'
+    width: ((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.review) === null || _b === void 0 ? void 0 : _b.width) || '30ch',
+    option: {
+      space: 'xl'
+    }
   };
   return jsx(ReviewLayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,
@@ -11847,14 +11912,19 @@ const GoAVerticalLayoutComponent = ({
   cells,
   visible
 }) => {
+  var _a;
   const verticalLayout = uischema;
+  ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.spacing) || 's';
   const childProps = {
     elements: verticalLayout.elements,
     schema,
     path,
     enabled,
     direction: 'column',
-    visible
+    visible,
+    option: {
+      space: 'xl'
+    }
   };
   return jsx(LayoutRenderer, Object.assign({}, childProps, {
     renderers: renderers,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.9.1",
+  "version": "2.11.0",
   "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/ListWithDetailControl.d.ts

@@ -37,6 +37,9 @@ interface ListWithDetailControlProps extends ObjectArrayControlProps {
     setCurrentTab: (index: number) => void;
 }
 export declare class ListWithDetailControl extends React.Component<ListWithDetailControlProps, any> {
+    state: {
+        maxItemsError: string;
+    };
     addItem: (path: string, value: any) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/src/lib/common/Constants.d.ts

@@ -1,2 +1,3 @@
 export declare const sinTitle = "Social insurance number";
 export declare const invalidSin = "Social insurance number is invalid";
+export declare const DEFAULT_MAX_ITEMS = 50;

package/src/lib/util/layout.d.ts

@@ -8,6 +8,9 @@ export interface LayoutRendererProps extends OwnPropsOfRenderer {
     elements: UISchemaElement[];
     direction: 'row' | 'column';
     width?: string;
+    option: {
+        space?: string;
+    };
 }
 export interface AjvProps {
     ajv: Ajv;