@abgov/jsonforms-components 2.47.3 → 2.47.5

package/index.esm.js

@@ -14,6 +14,8 @@ import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import pluralize from 'pluralize';
+import dompurify from 'dompurify';
+import * as xss from 'xss';
 import { evaluateSync, compileSync } from '@mdx-js/mdx';
 import { Parser } from 'expr-eval-fork';
 import addErrors from 'ajv-errors';
@@ -10894,23 +10896,22 @@ const renderCellColumn = ({
 }) => {
   const renderWarningCell = data => {
     return jsx(HilightCellWarning, {
-      children: jsxs(ObjectArrayWarningIconDiv, {
-        children: [jsx(GoabIcon, {
+      children: jsx(ObjectArrayWarningIconDiv, {
+        children: jsx(GoabIcon, {
           type: "warning",
           title: "warning",
           size: "small",
           theme: "filled",
           ml: "2xs",
           mt: "2xs"
-        }), data]
+        })
       })
     });
   };
   if (data === undefined && isRequired || error !== '' && error !== undefined) {
-    const message = error || (isRequired && data === undefined ? 'Required' : data);
-    return renderWarningCell(message);
+    return renderWarningCell();
   } else if (data !== undefined && isRequired && error) {
-    return renderWarningCell(error);
+    return renderWarningCell();
   }
   const path = `/${rowPath}/${index}/${element}/${index === 0 ? index : index - 1}`;
   const nestedErrors = errors == null ? void 0 : errors.filter(e => e.instancePath.includes(path));
@@ -11111,10 +11112,6 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
             }, 0)
           }), jsx("tbody", {
             children: range(count || 0).map((num, i) => {
-              // Skip rendering empty rows in review mode
-              if (isInReview === true && (data === undefined || data[num] === undefined || Object.keys(data[num]).length === 0)) {
-                return null;
-              }
               const errorRow = errors == null ? void 0 : errors.find(error => error.instancePath.includes(`/${props.rowPath.replace(/\./g, '/')}/${i}`));
               return jsxs("tr", {
                 children: [Object.keys(properties).map((element, ix) => {
@@ -11166,7 +11163,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
                         children: renderCellColumn({
                           data: currentData !== '' && currentData !== null && currentData !== undefined ? currentData : undefined,
                           error: humanMessage,
-                          isRequired: (_required$includes = required == null ? void 0 : required.includes(tableKeys[element])) != null ? _required$includes : false,
+                          isRequired: (_required$includes = required == null ? void 0 : required.includes(element)) != null ? _required$includes : false,
                           errors: errors !== undefined ? errors : [],
                           element,
                           rowPath,
@@ -12043,11 +12040,19 @@ const AddressLoopUpControlTableReview = props => {
       "data-testid": "address-lookup-table-review",
       children: jsx(PageReviewContainer, {
         colSpan: 3,
-        children: jsx(ReviewLabel, {
-          children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
+        children: jsxs(ReviewHeader, {
+          children: [jsx(ReviewLabel, {
+            children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
+          }), stepId !== undefined && jsx(GoabButton, {
+            type: "tertiary",
+            size: "compact",
+            onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId, targetScope),
+            testId: "address-change-btn",
+            children: "Change"
+          })]
         })
       })
-    }), renderRow('Address line 1', data == null ? void 0 : data.addressLine1, 'addressLine1', true), (data == null ? void 0 : data.addressLine2) && renderRow('Address line 2', data.addressLine2, 'addressLine2', false), renderRow('City', data == null ? void 0 : data.municipality, 'municipality', false), renderRow('Postal Code', data == null ? void 0 : data.postalCode, 'postalCode', false), renderRow('Province', provinceLabel, 'subdivisionCode', false), renderRow('Country', 'Canada', 'country', false)]
+    }), renderRow('Address line 1', data == null ? void 0 : data.addressLine1, 'addressLine1', false), (data == null ? void 0 : data.addressLine2) && renderRow('Address line 2', data.addressLine2, 'addressLine2', false), renderRow('City', data == null ? void 0 : data.municipality, 'municipality', false), renderRow('Postal Code', data == null ? void 0 : data.postalCode, 'postalCode', false), renderRow('Province', provinceLabel, 'subdivisionCode', false), renderRow('Country', 'Canada', 'country', false)]
   });
 };
 
@@ -13190,6 +13195,81 @@ const SummaryRow = ({
   });
 };
 
+const options = {
+  whiteList: {
+    html: ['lang'],
+    meta: ['name', 'content', 'charset'],
+    div: ['style', 'class'],
+    style: [],
+    a: ['href', 'title', 'target', 'style', 'class'],
+    em: [],
+    main: [],
+    footer: ['style'],
+    header: ['style'],
+    head: [],
+    abbr: ['title', 'style'],
+    title: [],
+    address: ['style'],
+    area: ['shape', 'coords', 'href', 'alt', 'style'],
+    article: [],
+    blockquote: [],
+    aside: [],
+    details: [],
+    h1: [],
+    h2: [],
+    h3: [],
+    h4: [],
+    h5: [],
+    h6: [],
+    hr: [],
+    i: [],
+    img: ['src', 'alt', 'title', 'width', 'height'],
+    ins: ['datetime'],
+    li: [],
+    mark: [],
+    nav: [],
+    ol: [],
+    p: [],
+    pre: [],
+    s: [],
+    section: [],
+    small: [],
+    span: ['class', 'style'],
+    sub: [],
+    summary: [],
+    sup: [],
+    select: [],
+    optgroup: [],
+    form: [],
+    strong: [],
+    label: [],
+    strike: [],
+    table: ['width', 'border', 'align', 'valign', 'class', 'style'],
+    tbody: ['align', 'valign', 'class', 'style'],
+    body: ['class', 'style'],
+    td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
+    tfoot: ['align', 'valign', 'class', 'style'],
+    th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
+    thead: ['align', 'valign'],
+    tr: ['rowspan', 'align', 'valign'],
+    tt: [],
+    u: [],
+    ul: [],
+    br: [],
+    b: [],
+    option: []
+  }
+}; // Custom rules
+new xss.FilterXSS(options);
+const sanitizeHtml = dompurify.sanitize;
+dompurify.addHook('afterSanitizeAttributes', function (node) {
+  // set all elements owning target to target=_blank
+  if ('target' in node) {
+    node.setAttribute('target', '_blank');
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
 const _excluded$1 = ["type"];
 const AdditionalInstructionsRow = ({
   additionalInstructions,
@@ -13200,6 +13280,7 @@ const AdditionalInstructionsRow = ({
   const type = validTypes.includes(calloutType) ? calloutType : 'information';
   const _ref = componentProps || {},
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  const sanitizedHtml = sanitizeHtml(additionalInstructions);
   return jsx("tr", {
     children: jsx("td", {
       colSpan: 2,
@@ -13208,7 +13289,11 @@ const AdditionalInstructionsRow = ({
         mt: "xl",
         mb: "l"
       }, otherProps, {
-        children: additionalInstructions
+        children: jsx("div", {
+          dangerouslySetInnerHTML: {
+            __html: sanitizedHtml
+          }
+        })
       }))
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.47.3",
+  "version": "2.47.5",
   "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",
@@ -10,6 +10,8 @@
     "@jsonforms/core": "^3.1.0",
     "@jsonforms/react": "^3.1.0",
     "react": "^18.0.0",
+    "dompurify": "^3.2.4",
+    "xss": "^1.0.15",
     "ajv": "^8.6.1",
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",

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

@@ -0,0 +1,19 @@
+import dompurify from 'dompurify';
+export declare const sanitizeHtml: {
+    (dirty: string | Node, cfg: dompurify.Config & {
+        RETURN_TRUSTED_TYPE: true;
+    }): import("trusted-types/lib").TrustedHTML;
+    (dirty: Node, cfg: dompurify.Config & {
+        IN_PLACE: true;
+    }): Node;
+    (dirty: string | Node, cfg: dompurify.Config & {
+        RETURN_DOM: true;
+    }): Node;
+    (dirty: string | Node, cfg: dompurify.Config & {
+        RETURN_DOM_FRAGMENT: true;
+    }): DocumentFragment;
+    (dirty: string | Node, cfg?: dompurify.Config): string;
+};
+export declare function hasXSS(html: string): boolean;
+export declare const htmlSanitized: (html: string) => string;
+export declare const XSSErrorMessage = "The template contains content that could expose users to Cross Site Scripting attacks. Remove risky elements like <script> to save the template.";