@abgov/jsonforms-components 2.68.1 → 2.70.0

package/index.esm.js

@@ -1,6 +1,5 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React, { useContext, useReducer, useMemo, useEffect, createContext, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { GoabFormItem, GoabDropdown, GoabDropdownItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabTable, GoabGrid, GoabIconButton, GoabModal, GoabButtonGroup, GoabContainer, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useEffect, useContext, useReducer, useMemo, createContext, useCallback, useState, useLayoutEffect } from 'react';
 import Ajv from 'ajv';
 import styled from 'styled-components';
 import axios from 'axios';
@@ -15,6 +14,7 @@ import merge from 'lodash/merge';
 import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
 import pluralize from 'pluralize';
+import { GoabTable as GoabTable$1, GoabGrid as GoabGrid$1, GoabContainer as GoabContainer$1 } from '@abgov/react-components';
 import { compileSync } from '@mdx-js/mdx';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
@@ -1826,6 +1826,759 @@ $$J({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
   }
 });
 
+const lowercase = (input) => input.toLowerCase();
+function transformProps(props, transform = lowercase) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    if (key.startsWith("data-")) {
+      result[key] = value;
+    } else {
+      result[transform(key)] = value;
+    }
+  }
+  return result;
+}
+
+function getIconValue(icon, iconType) {
+  if (icon !== void 0) {
+    return icon ? "true" : "false";
+  }
+  return iconType ? "true" : "false";
+}
+function GoabBadge({ icon, iconType, ...rest }) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-badge",
+    {
+      icon: getIconValue(icon, iconType),
+      icontype: iconType,
+      ..._props
+    }
+  );
+}
+function GoabButton({
+  disabled,
+  onClick,
+  actionArgs,
+  actionArg,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    current.addEventListener("_click", listener);
+    return () => {
+      current.removeEventListener("_click", listener);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-button",
+    {
+      ref: el,
+      disabled: disabled ? "true" : void 0,
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
+    }
+  );
+}
+function GoabButtonGroup({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-button-group", { ..._props, children });
+}
+const GoabCallout = ({
+  type = "information",
+  iconTheme = "outline",
+  size = "large",
+  ariaLive = "off",
+  children,
+  ...rest
+}) => {
+  const _props = transformProps(
+    { type, icontheme: iconTheme, size, arialive: ariaLive, ...rest },
+    lowercase
+  );
+  return /* @__PURE__ */ jsx("goa-callout", { ..._props, children });
+};
+function GoabCheckbox({
+  error,
+  checked,
+  indeterminate,
+  disabled,
+  value,
+  description,
+  reveal,
+  onChange,
+  name,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsxs(
+    "goa-checkbox",
+    {
+      ref: el,
+      ..._props,
+      name,
+      error: error ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      indeterminate: indeterminate ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      value: typeof value === "boolean" ? value ? "true" : void 0 : value,
+      description: typeof description === "string" ? description : void 0,
+      children: [
+        children,
+        typeof description !== "string" && description && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal })
+      ]
+    }
+  );
+}
+const GoabCircularProgress = ({
+  visible,
+  message,
+  progress,
+  variant,
+  size,
+  testId
+}) => {
+  return /* @__PURE__ */ jsx(
+    "goa-circular-progress",
+    {
+      visible: visible ? "true" : void 0,
+      message,
+      progress,
+      variant,
+      size,
+      testid: testId
+    }
+  );
+};
+function GoabContainer({
+  heading,
+  title,
+  actions,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  const headingContent = heading || title;
+  return /* @__PURE__ */ jsxs("goa-container", { ..._props, children: [
+    headingContent && /* @__PURE__ */ jsx("div", { slot: "title", children: headingContent }),
+    children,
+    actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions })
+  ] });
+}
+function GoabDetails({
+  open,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-details",
+    {
+      open: open ? "true" : void 0,
+      ..._props,
+      children
+    }
+  );
+}
+function stringify(value) {
+  if (typeof value === "undefined") {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value);
+}
+function GoabDropdown({
+  value,
+  onChange,
+  disabled,
+  error,
+  filterable,
+  multiselect,
+  native,
+  relative,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    if (onChange) {
+      current.addEventListener("_change", handler);
+    }
+    return () => {
+      if (onChange) {
+        current.removeEventListener("_change", handler);
+      }
+    };
+  }, [el, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-dropdown",
+    {
+      ref: el,
+      value: stringify(value),
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      filterable: filterable ? "true" : void 0,
+      multiselect: multiselect ? "true" : void 0,
+      native: native ? "true" : void 0,
+      relative: relative ? "true" : void 0,
+      ..._props,
+      children
+    }
+  );
+}
+function GoabDropdownItem({
+  value,
+  label,
+  filter,
+  name,
+  mountType = "append"
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-dropdown-item",
+    {
+      value,
+      label,
+      filter,
+      name,
+      mount: mountType
+    }
+  );
+}
+function GoabFileUploadInput({
+  onSelectFile,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onSelectFile({ ...detail, event: e });
+    };
+    current.addEventListener("_selectFile", handler);
+    return () => {
+      current.removeEventListener("_selectFile", handler);
+    };
+  }, [el, onSelectFile]);
+  return /* @__PURE__ */ jsx("goa-file-upload-input", { ref: el, ..._props });
+}
+function GoabFormItem({
+  error,
+  helpText,
+  publicFormSummaryOrder,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxs(
+    "goa-form-item",
+    {
+      error: typeof error === "string" ? error : void 0,
+      helptext: typeof helpText === "string" ? helpText : void 0,
+      "public-form-summary-order": publicFormSummaryOrder,
+      ..._props,
+      children: [
+        error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
+        helpText && typeof helpText !== "string" && /* @__PURE__ */ jsx("div", { slot: "helptext", children: helpText }),
+        children
+      ]
+    }
+  );
+}
+function GoabFormStep(props) {
+  return /* @__PURE__ */ jsx("goa-form-step", { text: props.text, status: props.status });
+}
+function GoabFormStepper({
+  testId,
+  step,
+  mt,
+  mb,
+  ml,
+  mr,
+  onChange,
+  children
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange(detail);
+    };
+    current.addEventListener("_change", changeListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+    };
+  }, [ref, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-form-stepper",
+    {
+      ref,
+      testid: testId,
+      step,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
+function GoabGrid({
+  gap,
+  minChildWidth,
+  mt,
+  mr,
+  mb,
+  ml,
+  testId,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-grid",
+    {
+      gap,
+      minchildwidth: minChildWidth,
+      mt,
+      mr,
+      mb,
+      ml,
+      testid: testId,
+      children
+    }
+  );
+}
+function GoabIconButton({
+  variant = "color",
+  size = "medium",
+  disabled,
+  onClick,
+  actionArgs,
+  actionArg,
+  children,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(
+    { variant, size, ...rest },
+    lowercase
+  );
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (!onClick) {
+      return;
+    }
+    const current = ref.current;
+    const listener = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    current.addEventListener("_click", listener);
+    return () => {
+      current.removeEventListener("_click", listener);
+    };
+  }, [ref, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-icon-button",
+    {
+      ref,
+      disabled: disabled ? "true" : void 0,
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
+    }
+  );
+}
+function GoabIcon({
+  inverted,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-icon",
+    {
+      inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
+      ..._props
+    }
+  );
+}
+function GoabInput({
+  variant = "goa",
+  textAlign = "left",
+  focused,
+  disabled,
+  readonly,
+  error,
+  leadingContent,
+  trailingContent,
+  onTrailingIconClick,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyPress,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps({ variant, textalign: textAlign, ...rest }, lowercase);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const clickListener = () => {
+      onTrailingIconClick == null ? void 0 : onTrailingIconClick();
+    };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
+    };
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_trailingIconClick", clickListener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
+    current.addEventListener("_keyPress", keypressListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_trailingIconClick", clickListener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
+      current.removeEventListener("_keyPress", keypressListener);
+    };
+  }, [ref, onChange, onTrailingIconClick, onFocus, onBlur, onKeyPress]);
+  return /* @__PURE__ */ jsxs(
+    "goa-input",
+    {
+      ref,
+      ..._props,
+      focused: focused ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      readonly: readonly ? "true" : void 0,
+      error: error ? "true" : void 0,
+      handletrailingiconclick: onTrailingIconClick ? "true" : "false",
+      children: [
+        leadingContent && /* @__PURE__ */ jsx("div", { slot: "leadingContent", children: leadingContent }),
+        trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: trailingContent })
+      ]
+    }
+  );
+}
+function GoabModal({
+  heading,
+  children,
+  maxWidth,
+  open,
+  actions,
+  transition,
+  calloutVariant,
+  onClose,
+  testId
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onClose == null ? void 0 : onClose();
+    };
+    current.addEventListener("_close", listener);
+    return () => {
+      current.removeEventListener("_close", listener);
+    };
+  }, [el, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "goa-modal",
+    {
+      ref: el,
+      open: open ? "true" : void 0,
+      closable: onClose ? "true" : "false",
+      heading: typeof heading === "string" ? heading : void 0,
+      maxwidth: maxWidth,
+      transition,
+      calloutvariant: calloutVariant,
+      testid: testId,
+      children: [
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
+}
+function GoabPages(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-pages",
+    {
+      current: props.current,
+      ml: props.ml,
+      mr: props.mr,
+      mt: props.mt,
+      mb: props.mb,
+      children: props.children
+    }
+  );
+}
+function GoabRadioItem({
+  name,
+  label,
+  value,
+  description,
+  reveal,
+  revealAriaLabel,
+  maxWidth,
+  disabled,
+  checked,
+  error,
+  ariaLabel,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  return /* @__PURE__ */ jsxs(
+    "goa-radio-item",
+    {
+      name,
+      label,
+      value,
+      description: typeof description === "string" ? description : void 0,
+      maxwidth: maxWidth,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
+      mt,
+      mr,
+      mb,
+      ml,
+      children: [
+        description && typeof description !== "string" && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal }),
+        children
+      ]
+    }
+  );
+}
+function GoabRadioGroup({
+  disabled,
+  error,
+  onChange,
+  name,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const currentEl = el.current;
+    if (onChange) {
+      currentEl.addEventListener("_change", listener);
+    }
+    return () => {
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-radio-group",
+    {
+      ref: el,
+      ..._props,
+      name,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      children
+    }
+  );
+}
+function GoabSpinner({
+  type,
+  size,
+  progress,
+  invert,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-spinner",
+    {
+      type,
+      size,
+      progress,
+      invert: invert ? "true" : void 0,
+      testid: testId
+    }
+  );
+}
+function GoabTable({ onSort, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const sortListener = (e) => {
+      const detail = e.detail;
+      onSort == null ? void 0 : onSort(detail);
+    };
+    current.addEventListener("_sort", sortListener);
+    return () => {
+      current.removeEventListener("_sort", sortListener);
+    };
+  }, [ref, onSort]);
+  return /* @__PURE__ */ jsx(
+    "goa-table",
+    {
+      ref,
+      width: props.width,
+      variant: props.variant,
+      testid: props.testId,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: props.children })
+    }
+  );
+}
+function GoabText({
+  as,
+  tag,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-text",
+    {
+      as: tag || as,
+      ..._props,
+      children
+    }
+  );
+}
+function GoabTextArea({
+  readOnly,
+  disabled,
+  error,
+  onChange,
+  onKeyPress,
+  onBlur,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_keyPress", keypressListener);
+    current.addEventListener("_blur", blurListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_blur", blurListener);
+    };
+  }, [el, onChange, onKeyPress, onBlur]);
+  return /* @__PURE__ */ jsx(
+    "goa-textarea",
+    {
+      ref: el,
+      readOnly: readOnly ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      ..._props
+    }
+  );
+}
+
 var NATIVE_BIND$1 = functionBindNative;
 
 var FunctionPrototype = Function.prototype;
@@ -6441,7 +7194,6 @@ function collectRequiredPaths(schema, basePath = '') {
   }
   return out;
 }
-// eslint-disable-next-line
 function collectControllerKeys(ifSchema) {
   if (!isObj(ifSchema)) return [];
   const keys = new Set();
@@ -6454,7 +7206,6 @@ function collectControllerKeys(ifSchema) {
   }
   return [...keys];
 }
-// eslint-disable-next-line
 function buildConditionalDeps(rootSchema) {
   const deps = new Map();
   // eslint-disable-next-line
@@ -6489,9 +7240,55 @@ function buildConditionalDeps(rootSchema) {
   return out;
 }
 
+const sinTitle = 'Social insurance number';
+const invalidSin = 'Social insurance number is invalid';
+const DEFAULT_MAX_ITEMS = 50;
+const REQUIRED_PROPERTY_ERROR = 'is a required property';
+const ADDRESS_LOOKUP_LABELS = {
+  addressLine1: 'Address line 1',
+  addressLine2: 'Address line 2',
+  municipality: 'City',
+  postalCode: 'Postal code',
+  subdivisionCode: 'Province',
+  country: 'Country'
+};
+const VALIDATION_KEYWORDS = {
+  REQUIRED: 'required',
+  MIN_LENGTH: 'minLength',
+  MAX_LENGTH: 'maxLength',
+  FORMAT: 'format',
+  MINIMUM: 'minimum',
+  MAXIMUM: 'maximum',
+  TYPE: 'type',
+  ERROR_MESSAGE: 'errorMessage'
+};
+var StepStatus;
+(function (StepStatus) {
+  StepStatus["NOT_STARTED"] = "NotStarted";
+  StepStatus["IN_PROGRESS"] = "InProgress";
+  StepStatus["COMPLETED"] = "Completed";
+})(StepStatus || (StepStatus = {}));
+const getAddressLookupFieldLabel = fieldName => {
+  return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getValueAtPath(obj, path) {
+  return path.split('.').reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function hasMeaningfulValue(val) {
+  if (val === undefined || val === null) return false;
+  if (typeof val === 'string') return val.trim() !== '';
+  if (Array.isArray(val)) return val.length > 0;
+  if (typeof val === 'object') return Object.keys(val).length > 0;
+  return true;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getSubSchema(schema, path) {
   const parts = path.replace(/^#\//, '').split('/').filter(p => p !== 'properties') // remove 'properties' segments
   .slice(0, -1);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let current = schema;
   for (const part of parts) {
     if (!current) return undefined;
@@ -6505,6 +7302,28 @@ function getSubSchema(schema, path) {
   }
   return current;
 }
+// Checks whether any of the given normalized scopes (dot-path form, e.g. "a.b.c")
+// resolve to a property name present in the required array. Returns true if at
+// least one scope's property name is required, false otherwise.
+function isScopeRequired(normalizedScopes, required) {
+  if (!(normalizedScopes != null && normalizedScopes.length) || !(required != null && required.length)) return false;
+  return normalizedScopes.some(scope => {
+    const propertyName = scope.split('.').pop();
+    return !!propertyName && required.includes(propertyName);
+  });
+}
+// Aggregates the required property names applicable to a step's scopes: the
+// schema's top-level required array plus the required array of each scope's
+// immediate parent (sub)schema (for nested objects).
+function getRequiredForScopes(scopes, schema) {
+  const topLevelRequired = schema.required || [];
+  const scopeSets = scopes.reduce((acc, scope) => {
+    const subSchema = getSubSchema(schema, scope);
+    return acc.concat((subSchema == null ? void 0 : subSchema.required) || []);
+  }, topLevelRequired);
+  return Array.from(new Set(scopeSets));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function anyRequiredFieldEmpty(scopes, data, required, schema) {
   for (const scope of scopes) {
     const path = scope.replace(/^#\//, '').split('/').filter(p => p !== 'properties');
@@ -6528,6 +7347,15 @@ function anyRequiredFieldEmpty(scopes, data, required, schema) {
   }
   return false;
 }
+// Resolve a single schema scope against the provided data and determine whether
+// it already holds a meaningful value. Used to derive the initial "visited"
+// state of a step from populated form data.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function hasValueAtScope(data, scope) {
+  const path = normalizeSchemaPath(scope);
+  if (!path) return false;
+  return hasMeaningfulValue(getValueAtPath(data, path));
+}
 function getStepStatus(opts) {
   const {
     scopes,
@@ -6536,22 +7364,50 @@ function getStepStatus(opts) {
     data,
     visited
   } = opts;
-  if (!visited) {
-    return 'NotStarted';
-  }
   const normalizedScopes = scopes.map(normalizeSchemaPath).filter(Boolean);
+  // A step with no required fields has nothing that must be filled in, so once
+  // the user has visited it (e.g. navigated back to the application overview
+  // page) it is trivially Completed, regardless of whether its optional
+  // fields hold any data.
+  const requiredForScopes = getRequiredForScopes(scopes, schema);
+  const stepHasRequiredFields = isScopeRequired(normalizedScopes, requiredForScopes);
+  // NotStarted is data-driven: if any scoped field has a defined value the step has been started.
+  // For non-standard scopes that cannot be normalised, fall back to the visited flag so those
+  // steps are never stuck in NotStarted when the form is pre-populated or already visited.
+  const stepHasData = normalizedScopes.length > 0 ? normalizedScopes.some(path => hasMeaningfulValue(get$1(data || {}, path))) : visited != null ? visited : false;
+  if (!stepHasRequiredFields && (visited || stepHasData)) {
+    return {
+      status: StepStatus.COMPLETED,
+      hasRequiredFields: stepHasRequiredFields
+    };
+  }
+  if (!stepHasData) {
+    return {
+      status: StepStatus.NOT_STARTED,
+      hasRequiredFields: stepHasRequiredFields
+    };
+  }
   const incompleteInStep = getIncompletePaths(errors, scopes);
   if (incompleteInStep.length > 0) {
-    return 'InProgress';
+    return {
+      status: StepStatus.IN_PROGRESS,
+      hasRequiredFields: stepHasRequiredFields
+    };
   }
   const required = schema.required || [];
   if (anyRequiredFieldEmpty(scopes, data, required, schema)) {
-    return 'InProgress';
+    return {
+      status: StepStatus.IN_PROGRESS,
+      hasRequiredFields: stepHasRequiredFields
+    };
   }
   const deps = buildConditionalDeps(schema);
   const controllersInStep = normalizedScopes.filter(s => deps.has(s));
   if (controllersInStep.length === 0) {
-    return 'Completed';
+    return {
+      status: StepStatus.COMPLETED,
+      hasRequiredFields: stepHasRequiredFields
+    };
   }
   const affected = new Set();
   for (const controller of controllersInStep) {
@@ -6560,27 +7416,38 @@ function getStepStatus(opts) {
     }
   }
   if (affected.size === 0) {
-    return 'Completed';
+    return {
+      status: StepStatus.COMPLETED,
+      hasRequiredFields: stepHasRequiredFields
+    };
   }
   const affectedPaths = [...affected];
   for (const err of errors || []) {
     for (const candidate of collectErrorCandidates(err)) {
       if (affectedPaths.some(path => isUnder(candidate, path))) {
-        return 'InProgress';
+        return {
+          status: StepStatus.IN_PROGRESS,
+          hasRequiredFields: stepHasRequiredFields
+        };
       }
     }
   }
-  return 'Completed';
+  return {
+    status: StepStatus.COMPLETED,
+    hasRequiredFields: stepHasRequiredFields
+  };
 }
 function collectErrorCandidates(e) {
   var _e$params;
   const out = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const missing = (_e$params = e.params) == null ? void 0 : _e$params.missingProperty;
-  if (e.keyword === 'required' && missing) {
+  if (e.keyword === VALIDATION_KEYWORDS.REQUIRED && missing) {
     const base = normalizeInstancePath(e.instancePath || '');
     out.push(base ? `${base}.${missing}` : missing);
   }
   if (e.instancePath) out.push(normalizeInstancePath(e.instancePath));
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if (e.dataPath) out.push(normalizeInstancePath(e.dataPath));
   return out.filter(Boolean);
 }
@@ -6609,9 +7476,10 @@ function getIncompletePaths(errors, scopePaths) {
   const incomplete = new Set();
   for (const error of errors) {
     var _error$params;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const missingProperty = (_error$params = error.params) == null ? void 0 : _error$params.missingProperty;
     const candidates = [];
-    if (error.keyword === 'required' && missingProperty) {
+    if (error.keyword === VALIDATION_KEYWORDS.REQUIRED && missingProperty) {
       candidates.push(missingProperty);
       if (error.instancePath) {
         const base = normalizeInstancePath(error.instancePath);
@@ -6672,7 +7540,22 @@ const stepperReducer = (state, action) => {
   switch (action.type) {
     case 'update/uischema':
       {
-        return Object.assign({}, action.payload.state);
+        const newState = action.payload.state;
+        // createStepperContextInitData recomputes categories purely from the
+        // current data/schema snapshot, so a category with no data in its scopes
+        // is reported as not visited even if the user already navigated through it
+        // (page/next, page/prev, or setVisited previously marked it visited).
+        // Preserve any previously-tracked isVisited=true so navigation history
+        // isn't lost whenever unrelated form data changes trigger this recompute.
+        const mergedCategories = newState.categories.map(newCategory => {
+          const previousCategory = categories.find(c => c.id === newCategory.id);
+          return Object.assign({}, newCategory, {
+            isVisited: (previousCategory == null ? void 0 : previousCategory.isVisited) || newCategory.isVisited
+          });
+        });
+        return Object.assign({}, newState, {
+          categories: mergedCategories
+        });
       }
     case 'page/next':
       {
@@ -6740,7 +7623,9 @@ const stepperReducer = (state, action) => {
           }
           const filteredErrors = ajv.errors && ajv.errors.filter(error => (error == null ? void 0 : error.data) != null);
           const visited = true;
-          const status = getStepStatus({
+          const {
+            status
+          } = getStepStatus({
             scopes: cat.scopes,
             data,
             errors: filteredErrors != null ? filteredErrors : [],
@@ -6748,9 +7633,9 @@ const stepperReducer = (state, action) => {
             visited
           });
           return Object.assign({}, cat, {
-            isCompleted: status === 'Completed',
-            isValid: status === 'Completed',
-            status
+            isCompleted: status === StepStatus.COMPLETED,
+            isValid: status === StepStatus.COMPLETED,
+            status: status
           });
         });
         return Object.assign({}, state, {
@@ -6810,26 +7695,38 @@ const createStepperContextInitData = props => {
   // run validation once, capture errors
   const valid = ajv.validate(schema, data || {});
   const isPage = (uischema == null || (_uischema$options = uischema.options) == null ? void 0 : _uischema$options.variant) === 'pages';
+  //TODO: Determine if cachedStatus is still being used by anything in the library
+  //      If not, do a proper clean up.
   const isCacheStatus = (_uischema$options2 = uischema.options) == null ? void 0 : _uischema$options2.cacheStatus;
   isCacheStatus && getIsVisitFromLocalStorage() || [];
   const categories = (_categorization$eleme = categorization.elements) == null ? void 0 : _categorization$eleme.map((c, id) => {
     var _deriveLabelForUISche;
     const scopes = pickPropertyValues(c, 'scope', 'ListWithDetail');
-    const visited = false;
-    const status = getStepStatus({
+    // Treat a step as visited when its scoped fields already contain data so
+    // that getStepStatus returns the real data-driven status on initial mount initially.
+    let visited = scopes.some(scope => hasValueAtScope(data, scope));
+    const {
+      status,
+      hasRequiredFields
+    } = getStepStatus({
       scopes,
       data,
       errors: filteredErrors != null ? filteredErrors : [],
       schema,
       visited
     });
+    //If the step has all conditional fields, set visited to true so that the step status will be
+    //completed to enable form to be saved.
+    if (!hasRequiredFields) {
+      visited = true;
+    }
     return {
       id,
       label: (_deriveLabelForUISche = deriveLabelForUISchemaElement(c, t)) != null ? _deriveLabelForUISche : `Step ${id + 1}`,
       scopes,
-      isCompleted: status === 'Completed',
-      isValid: status === 'Completed',
-      isVisited: status === 'Completed',
+      isCompleted: status === StepStatus.COMPLETED || visited && !hasRequiredFields,
+      isValid: status === StepStatus.COMPLETED || visited && !hasRequiredFields,
+      isVisited: [StepStatus.COMPLETED, StepStatus.IN_PROGRESS].includes(status),
       status,
       uischema: c,
       isEnabled: isEnabled(c, data, '', ajv, undefined),
@@ -6999,7 +7896,7 @@ const JsonFormsStepperContextProvider = ({
       }
     }
     //eslint-disable-next-line
-  }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema)]);
+  }, [JSON.stringify(StepperProps.uischema), JSON.stringify(StepperProps.schema), JSON.stringify(StepperProps.data)]);
   return jsx(JsonFormsStepperContext.Provider, {
     value: context,
     children: children
@@ -7264,32 +8161,6 @@ fixRegExpWellKnownSymbolLogic$1('match', function (MATCH, nativeMatch, maybeCall
   ];
 });
 
-const sinTitle = 'Social insurance number';
-const invalidSin = 'Social insurance number is invalid';
-const DEFAULT_MAX_ITEMS = 50;
-const REQUIRED_PROPERTY_ERROR = 'is a required property';
-const ADDRESS_LOOKUP_LABELS = {
-  addressLine1: 'Address line 1',
-  addressLine2: 'Address line 2',
-  municipality: 'City',
-  postalCode: 'Postal code',
-  subdivisionCode: 'Province',
-  country: 'Country'
-};
-const VALIDATION_KEYWORDS = {
-  REQUIRED: 'required',
-  MIN_LENGTH: 'minLength',
-  MAX_LENGTH: 'maxLength',
-  FORMAT: 'format',
-  MINIMUM: 'minimum',
-  MAXIMUM: 'maximum',
-  TYPE: 'type',
-  ERROR_MESSAGE: 'errorMessage'
-};
-const getAddressLookupFieldLabel = fieldName => {
-  return ADDRESS_LOOKUP_LABELS[fieldName] || fieldName;
-};
-
 //type DebounceValueType = string | boolean | number | Record<string, unknown>;
 /**
  * A helper util to return a value at a certain delay. The delay is reset if the value arg changes
@@ -8560,7 +9431,8 @@ const CheckboxGroup = props => {
             newData = newData.filter(item => item !== enumValue);
           }
           handleChange(path, newData.length === 0 ? undefined : newData);
-        }
+        },
+        mt: "s"
       }), enumValue);
     })
   });
@@ -9199,7 +10071,7 @@ const DataTable = ({
   columnLabels
 }) => {
   var _Object$keys;
-  return jsxs(GoabTable, {
+  return jsxs(GoabTable$1, {
     width: "100%",
     children: [jsx("thead", {
       children: jsx("tr", {
@@ -10544,7 +11416,6 @@ const GoAInputBaseTableReview = props => {
           })]
         }), stepId !== undefined && !((_uischema$options6 = uischema.options) != null && (_uischema$options6 = _uischema$options6.componentProps) != null && _uischema$options6.readOnly) && jsx(GoabButton, {
           type: "tertiary",
-          size: "compact",
           onClick: handleChangeClick,
           children: "Change"
         })]
@@ -10826,7 +11697,7 @@ const LayoutRenderer = ({
     if (direction === 'row') {
       return jsx(Visible, {
         "$visible": visible,
-        children: jsx(GoabGrid, {
+        children: jsx(GoabGrid$1, {
           minChildWidth: width || '10ch',
           children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
         })
@@ -11337,8 +12208,7 @@ const FullNameControlReview = props => {
               children: " (required)"
             })]
           }), stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
-            size: "compact",
+            type: "text",
             onClick: () => context == null ? void 0 : context.goToPage(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
             children: "Change"
@@ -11386,8 +12256,7 @@ const FullNameDobReviewControl = props => {
               children: " (required)"
             })]
           }), stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
-            size: "compact",
+            type: "text",
             onClick: () => context == null ? void 0 : context.goToPage(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
             children: "Change"
@@ -11776,8 +12645,7 @@ const ContractInfoControlReview = props => {
           children: [jsx(ReviewLabel, {
             children: fieldLabel
           }), stepId !== undefined && !((_uischema$options = uischema.options) != null && (_uischema$options = _uischema$options.componentProps) != null && _uischema$options.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
-            size: "compact",
+            type: "text",
             onClick: () => context == null ? void 0 : context.goToPage(stepId, uischema.scope),
             testId: `${fieldName}-change-btn`,
             children: "Change"
@@ -12953,6 +13821,7 @@ const PrimitiveArrayControl = props => {
             checked: checked,
             disabled: !enabled,
             testId: `${value}-checkbox`,
+            mt: "s",
             onChange: detail => {
               let newValue = [...items];
               if (detail.value) {
@@ -13382,7 +14251,7 @@ const AddressLoopUpControlTableReview = props => {
               children: " (required)"
             })]
           }), showButton && stepId !== undefined && !((_uischema$options2 = uischema.options) != null && (_uischema$options2 = _uischema$options2.componentProps) != null && _uischema$options2.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
+            type: "text",
             size: "compact",
             onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId, targetScope),
             testId: "address-change-btn",
@@ -13408,7 +14277,7 @@ const AddressLoopUpControlTableReview = props => {
           children: [jsx(ReviewLabel, {
             children: `${isAlbertaAddress ? 'Alberta' : 'Canada'} postal address`
           }), stepId !== undefined && !((_uischema$options3 = uischema.options) != null && (_uischema$options3 = _uischema$options3.componentProps) != null && _uischema$options3.readOnly) && jsx(GoabButton, {
-            type: "tertiary",
+            type: "text",
             size: "compact",
             onClick: () => formStepperCtx == null ? void 0 : formStepperCtx.goToPage(stepId, targetScope),
             testId: "address-change-btn",
@@ -13538,20 +14407,20 @@ const GoAGroupControlComponent = props => {
   const accent = componentProps == null ? void 0 : componentProps.accent;
   return jsxs(Visible, {
     "$visible": visible,
-    children: [accent === 'thick' && jsx(GoabContainer, Object.assign({
+    children: [accent === 'thick' && jsx(GoabContainer$1, Object.assign({
       heading: group.label
     }, componentProps, {
       children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
     })), (accent === 'thin' || accent === 'filled') && jsxs("div", {
       children: [group.label && jsx("h3", {
         children: group.label
-      }), jsx(GoabContainer, Object.assign({}, componentProps, {
+      }), jsx(GoabContainer$1, Object.assign({}, componentProps, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       }))]
     }), componentProps && !accent && jsxs("div", {
       children: [group.label && jsx("h3", {
         children: group.label
-      }), jsx(GoabContainer, Object.assign({}, componentProps, {
+      }), jsx(GoabContainer$1, Object.assign({}, componentProps, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       }))]
     }), !componentProps && jsxs("div", {
@@ -13559,7 +14428,7 @@ const GoAGroupControlComponent = props => {
         children: group.label
       }), isStepperReview ? jsx(Fragment, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
-      }) : jsx(GoabContainer, {
+      }) : jsx(GoabContainer$1, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       })]
     })]

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.68.1",
+  "version": "2.70.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",
   "peerDependencies": {
     "@abgov/react-components": "^6.9.3",
-    "@abgov/ui-components-common": "1.9.1",
+    "@abgov/ui-components-common": "2.2.1",
     "@jsonforms/core": "^3.1.0",
     "@jsonforms/react": "^3.1.0",
     "react": "^18.0.0",

package/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-07-09T20:09:22.767Z",
-  "sourceCommit": "5d8a7ba85bedb14a77786d3941256a92e2074f6b",
+  "generatedAt": "2026-07-23T15:27:18.993Z",
+  "sourceCommit": "f9c7063696b8fa8c87eb247175573525da9d3ffe",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 33,
   "renderers": [

package/src/lib/Controls/FormStepper/context/reducer.d.ts

@@ -2,6 +2,7 @@ import { StepperContextDataType } from './types';
 import { ErrorObject } from 'ajv';
 import { Dispatch } from 'react';
 import Ajv from 'ajv';
+import { JsonSchema } from '@jsonforms/core';
 export type JsonFormStepperDispatch = Dispatch<StepperAction>;
 export type StepperAction = {
     type: 'page/next';
@@ -24,7 +25,7 @@ export type StepperAction = {
         errors?: ErrorObject[];
         id: number;
         ajv: Ajv;
-        schema: any;
+        schema: JsonSchema;
         data: any;
     };
 } | {

package/src/lib/Controls/FormStepper/context/types.d.ts

@@ -1,4 +1,5 @@
 import { Categorization, Category } from '@jsonforms/core';
+import { StepStatusType } from '../../../common/Constants';
 export interface CategoryInternalState {
     isCompleted?: boolean;
     isVisited?: boolean;
@@ -16,6 +17,15 @@ export interface CategoryConfig {
 }
 export type CategoryState = CategoryInternalState & CategoryConfig;
 export type CategoriesState = Array<CategoryState>;
+export interface StepConfig {
+    id: string;
+    label: string;
+    scopePaths: string[];
+}
+export interface StepStatusData {
+    status: StepStatusType;
+    hasRequiredFields: boolean;
+}
 export interface StepperContextDataType {
     categories: CategoriesState;
     activeId: number;

package/src/lib/Controls/FormStepper/context/util.d.ts

@@ -1,12 +1,16 @@
+import { JsonSchema } from '@jsonforms/core';
 import type { ErrorObject } from 'ajv';
+import { StepStatusData } from './types';
 export declare function hasMeaningfulValue(val: any): boolean;
+export declare function isScopeRequired(normalizedScopes: string[], required: string[]): boolean;
+export declare function hasValueAtScope(data: any, scope: string): boolean;
 export declare function getStepStatus(opts: {
     scopes: string[];
     data: any;
     errors: AjvError[];
-    schema: any;
-    visited: boolean;
-}): 'Completed' | 'InProgress' | 'NotStarted';
+    schema: JsonSchema;
+    visited?: boolean;
+}): StepStatusData;
 export declare const isErrorPathIncluded: (errorPaths: string[], path: string) => boolean;
 type AjvError = ErrorObject & {
     dataPath?: string;
@@ -14,12 +18,6 @@ type AjvError = ErrorObject & {
 export declare function normalizeSchemaPath(schemaPath: string): string;
 export declare function normalizeInstancePath(instancePath: string): string;
 export declare function getIncompletePaths(errors: AjvError[] | null | undefined, scopePaths: string[]): string[];
-export type StepStatus = 'not-started' | 'in-progress' | 'completed';
-export interface StepConfig {
-    id: string;
-    label: string;
-    scopePaths: string[];
-}
 export declare const subErrorInParent: (error: ErrorObject, paths: string[]) => boolean;
 export declare const getErrorsInScopes: (errors: ErrorObject[] | null | undefined, scopes: string[]) => ErrorObject[];
 export declare const hasDataInScopes: (data: object, scopes: string[]) => boolean;

package/src/lib/Controls/FormStepper/util/conditionalDeps.d.ts

@@ -1 +1,2 @@
-export declare function buildConditionalDeps(rootSchema: any): Map<string, string[]>;
+import { JsonSchema } from '@jsonforms/core';
+export declare function buildConditionalDeps(rootSchema: JsonSchema): Map<string, string[]>;

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

@@ -20,4 +20,10 @@ export declare const VALIDATION_KEYWORDS: {
     TYPE: string;
     ERROR_MESSAGE: string;
 };
+export declare enum StepStatus {
+    NOT_STARTED = "NotStarted",
+    IN_PROGRESS = "InProgress",
+    COMPLETED = "Completed"
+}
+export type StepStatusType = StepStatus.COMPLETED | StepStatus.NOT_STARTED | StepStatus.IN_PROGRESS;
 export declare const getAddressLookupFieldLabel: (fieldName: string) => string;