@abgov/jsonforms-components 2.27.0 → 2.28.0

package/index.esm.js

@@ -7,7 +7,7 @@ import axios from 'axios';
 import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isControl, schemaMatches, getAjv, isVisible, toDataPath, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, or, isObjectArrayControl, isPrimitiveArrayControl, Paths, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, useJsonForms, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsAllOfProps, withJsonFormsCellProps } from '@jsonforms/react';
-import * as _$b from 'lodash';
+import * as _$c from 'lodash';
 import { isEqual, isEmpty as isEmpty$1, isObject as isObject$f } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty from 'lodash/isEmpty';
@@ -3548,16 +3548,16 @@ const onChangeForNumericControl = props => {
   }
 };
 
-let _$a = t => t,
-  _t$a,
+let _$b = t => t,
+  _t$b,
   _t2$7;
-styled.div(_t$a || (_t$a = _$a`
+styled.div(_t$b || (_t$b = _$b`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$7 || (_t2$7 = _$a`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$b`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -5189,8 +5189,8 @@ const JsonFormRegisterProvider = ({
   });
 };
 
-let _$9 = t => t,
-  _t$9,
+let _$a = t => t,
+  _t$a,
   _t2$6,
   _t3$5,
   _t4$5,
@@ -5198,42 +5198,42 @@ let _$9 = t => t,
   _t6$3,
   _t7$2,
   _t8$2;
-const FormFieldWrapper = styled.div(_t$9 || (_t$9 = _$9`
+const FormFieldWrapper = styled.div(_t$a || (_t$a = _$a`
   margin-bottom: var(--goa-space-l);
 `));
-const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$9`
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$a`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$9`
+const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$a`
   color: var(--goa-color-greyscale-700);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$9`
+const PageReviewNameCol = styled.td(_t4$5 || (_t4$5 = _$a`
   width: 5%;
   padding-top: var(--goa-space-s);
   padding-bottom: var(--goa-space-s);
   padding-right: var(--goa-space-m);
 `));
-const PageReviewValueCol = styled.td(_t5$5 || (_t5$5 = _$9`
+const PageReviewValueCol = styled.td(_t5$5 || (_t5$5 = _$a`
   width: 20%;
   text-align: left;
 `));
 //Check and unchecked are different heights otherwise
-const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$9`
+const CheckboxWrapper = styled.div(_t6$3 || (_t6$3 = _$a`
   height: 28px;
 `));
-styled.h4(_t7$2 || (_t7$2 = _$9`
+styled.h4(_t7$2 || (_t7$2 = _$a`
   margin: 0 0 0.25rem 0;
   fontsize: larger;
 `));
-styled.h4(_t8$2 || (_t8$2 = _$9`
+styled.h4(_t8$2 || (_t8$2 = _$a`
   border-bottom: 1px solid #ddd;
 `));
 
@@ -5458,13 +5458,13 @@ const SPACE_KEY = ' ';
 const ALT_KEY = 'Alt';
 const SHIFT_KEY = 'Shift';
 
-let _$8 = t => t,
-  _t$8,
+let _$9 = t => t,
+  _t$9,
   _t2$5,
   _t3$4,
   _t4$4,
   _t5$4;
-const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
+const GoADropdownTextbox = styled.div(_t$9 || (_t$9 = _$9`
   border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
   &:hover {
@@ -5475,11 +5475,11 @@ const GoADropdownTextbox = styled.div(_t$8 || (_t$8 = _$8`
     box-shadow: ${0};
   }
 `), p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus)` : '', p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus) !important` : '');
-const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$8`
+const GoADropdownListContainerWrapper = styled.div(_t2$5 || (_t2$5 = _$9`
   position: relative;
   display: ${0};
 `), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
-const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
+const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$9`
   border: solid 1px var(--goa-color-greyscale-200);
   border-radius: var(--goa-space-2xs);
   background: var(--goa-color-greyscale-white);
@@ -5503,7 +5503,7 @@ const GoADropdownListContainer = styled.div(_t3$4 || (_t3$4 = _$8`
     scrollbar-color: #a8a8a8 var(--goa-color-greyscale-100) !important;
   }
 `), p => p.optionListMaxHeight || '272px');
-const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
+const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$9`
   padding: var(--goa-space-2xs) var(--goa-space-s);
   text-overflow: ellipsis;
   color: ${0} !important;
@@ -5536,7 +5536,7 @@ const GoADropdownListOption = styled.div(_t4$4 || (_t4$4 = _$8`
     color: ${0};
   }
 `), p => p.isSelected ? '#fff' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-default)' : 'var(--goa-color-interactive-hover) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? 'var(--goa-color-interactive-hover)' : 'var(--goa-color-greyscale-100) !important', p => p.isSelected ? '#fff' : 'var(--goa-color-interactive-hover) !important');
-const LabelItem = styled.span(_t5$4 || (_t5$4 = _$8`
+const LabelItem = styled.span(_t5$4 || (_t5$4 = _$9`
   font: var(--goa-dropdown-typography);
 `));
 
@@ -6592,8 +6592,8 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
 const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
 const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
 
-let _$7 = t => t,
-  _t$7;
+let _$8 = t => t,
+  _t$8;
 const Checkboxes = ({
   children,
   orientation,
@@ -6605,7 +6605,7 @@ const Checkboxes = ({
     children: children
   });
 };
-const CheckBoxGroupDiv = styled.div(_t$7 || (_t$7 = _$7`
+const CheckBoxGroupDiv = styled.div(_t$8 || (_t$8 = _$8`
   .horizontal {
     display: flex;
     flex-direction: row;
@@ -6991,8 +6991,8 @@ const GoAEmailControl = props => jsx(GoAEmailInput, Object.assign({}, props));
 const GoAEmailControlTester = rankWith(4, and(isControl, schemaMatches(schema => schema.format === 'email')));
 const GoAInputEmailControl = withJsonFormsControlProps(GoAEmailControl);
 
-let _$6 = t => t,
-  _t$6;
+let _$7 = t => t,
+  _t$7;
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
   return elements.map((child, index) => jsx(JsonFormsDispatch, {
     uischema: child,
@@ -7071,14 +7071,14 @@ const ReviewLayoutRenderer = ({
     }
   }
 };
-const ReviewGrid = styled.div(_t$6 || (_t$6 = _$6`
+const ReviewGrid = styled.div(_t$7 || (_t$7 = _$7`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 8px)));
   gap: 16px;
 `));
 
-let _$5 = t => t,
-  _t$5,
+let _$6 = t => t,
+  _t$6,
   _t2$4,
   _t3$3,
   _t4$3,
@@ -7100,16 +7100,15 @@ let _$5 = t => t,
   _t20$1,
   _t21,
   _t22,
-  _t23,
-  _t24;
-const ReviewItem = styled.div(_t$5 || (_t$5 = _$5`
+  _t23;
+const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
   div:empty {
     display: none;
   }
 `));
-const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
+const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
   margin-bottom: var(--goa-space-m);
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
@@ -7119,18 +7118,18 @@ const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$5`
     max-width: 1600px;
   }
 `));
-const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$5`
+const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$6`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$5`
+const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$6`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-const Anchor = styled.div(_t5$3 || (_t5$3 = _$5`
+const Anchor = styled.div(_t5$3 || (_t5$3 = _$6`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -7141,20 +7140,20 @@ const Anchor = styled.div(_t5$3 || (_t5$3 = _$5`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t6$2 || (_t6$2 = _$5`
+styled.div(_t6$2 || (_t6$2 = _$6`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t7$1 || (_t7$1 = _$5`
+styled.div(_t7$1 || (_t7$1 = _$6`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t8$1 || (_t8$1 = _$5`
+styled.div(_t8$1 || (_t8$1 = _$6`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t9$1 || (_t9$1 = _$5`
+styled.h3(_t9$1 || (_t9$1 = _$6`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
+const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$6`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -7164,55 +7163,52 @@ const RightAlignmentDiv = styled.div(_t10$1 || (_t10$1 = _$5`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$5`
+const FormStepperSummaryH3 = styled.h3(_t11$1 || (_t11$1 = _$6`
   flex: 1;
   margin-bottom: var(--goa-space-m);
   font-size: var(--goa-font-size-7);
   line-height: var(--goa-line-height-4);
   font-weight: var(--goa-font-weight-regular);
 `));
-const PageRenderPadding = styled.div(_t12$1 || (_t12$1 = _$5`
+const PageRenderPadding = styled.div(_t12$1 || (_t12$1 = _$6`
   margin-top: var(--goa-space-2xl);
 `));
-styled.div(_t13$1 || (_t13$1 = _$5`
+styled.div(_t13$1 || (_t13$1 = _$6`
   margin-bottom: var(--goa-space-2xl);
 `));
-const PageBorder = styled.div(_t14$1 || (_t14$1 = _$5`
+const PageBorder = styled.div(_t14$1 || (_t14$1 = _$6`
   padding: var(--goa-space-m) var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t15$1 || (_t15$1 = _$5`
+const TableReviewItemSection = styled.div(_t15$1 || (_t15$1 = _$6`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t16$1 || (_t16$1 = _$5`
+const TableReviewItem = styled.div(_t16$1 || (_t16$1 = _$6`
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t17$1 || (_t17$1 = _$5`
+const TableReviewPageTitleRow = styled.div(_t17$1 || (_t17$1 = _$6`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t18$1 || (_t18$1 = _$5`
+const TableReviewCategoryLabel = styled.h3(_t18$1 || (_t18$1 = _$6`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t19$1 || (_t19$1 = _$5`
+const CategoryStatus = styled.td(_t19$1 || (_t19$1 = _$6`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
+  align-content: center;
 `));
-const TocPageRef = styled.td(_t20$1 || (_t20$1 = _$5`
-  padding-left: var(--goa-space-xl);
-`));
-const CompletionStatus = styled.div(_t21 || (_t21 = _$5`
+const CompletionStatus = styled.div(_t20$1 || (_t20$1 = _$6`
   padding: 0;
   margin: 0;
-  padding-left: var(--goa-space-xl);
-  padding-bottom: var(--goa-space-xl);
+  margin-bottom: 0 !important;
 `));
-const PageStepperRow = styled.tr(_t22 || (_t22 = _$5`
+const PageStepperRow = styled.tr(_t21 || (_t21 = _$6`
   ${0}
 `), ({
   disabled
@@ -7222,18 +7218,19 @@ const PageStepperRow = styled.tr(_t22 || (_t22 = _$5`
          ` : `
            cursor: pointer;
          `);
-const SectionHeaderRowTr = styled.tr(_t23 || (_t23 = _$5`
+const SectionHeaderRowTr = styled.tr(_t22 || (_t22 = _$6`
   & > td {
     border: 0 !important;
     padding-top: var(--goa-space-l);
     padding-bottom: var(--goa-space-s);
+    padding-left: 0 !important;
   }
 
   & + tr > td {
     border-top: none !important;
   }
 `));
-const SummaryRowLink = styled.a(_t24 || (_t24 = _$5`
+const SummaryRowLink = styled.a(_t23 || (_t23 = _$6`
   position: relative;
   top: var(--goa-space-xs);
 `));
@@ -7607,7 +7604,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
   Object.entries(obj).forEach(function ([key, value]) {
     if (key === property) {
       values.push(value);
-    } else if (_$b.isObject(value)) {
+    } else if (_$c.isObject(value)) {
       // if the object type is equal to end type, we are not going to continue the recursive approach
       if ((value === null || value === void 0 ? void 0 : value.type) === endWithType) {
         if (property in value) {
@@ -7616,7 +7613,7 @@ const pickPropertyValues = (obj, property, endWithType) => {
       } else {
         values = [...values, ...pickPropertyValues(value, property, endWithType)];
       }
-    } else if (_$b.isArray(value)) {
+    } else if (_$c.isArray(value)) {
       const nextValues = value.map(function (arrayObj) {
         return pickPropertyValues(arrayObj, property, endWithType);
       });
@@ -8338,9 +8335,8 @@ const SectionHeaderRow = ({
       colSpan: 2,
       children: jsx(GoAText, {
         size: "heading-m",
-        mt: "none",
+        mt: "xl",
         mb: "m",
-        ml: "m",
         children: section
       })
     })
@@ -8374,7 +8370,7 @@ const CategoryRow = ({
 }) => {
   return category.visible ? jsxs(PageStepperRow, {
     disabled: !(category === null || category === void 0 ? void 0 : category.isEnabled),
-    children: [jsx(TocPageRef, {
+    children: [jsx("td", {
       children: jsx("a", {
         "data-testid": `page-ref-${index}`,
         href: "#",
@@ -8382,10 +8378,7 @@ const CategoryRow = ({
           e.preventDefault();
           onClick(index);
         },
-        children: jsx(GoAText, {
-          ml: "l",
-          children: category.label
-        })
+        children: category.label
       })
     }), jsx(CategoryStatus, {
       children: getCategoryStatusBadge(category)
@@ -8402,9 +8395,8 @@ const SummaryRow = ({
   return jsx("tr", {
     children: jsx(GoAText, {
       size: "heading-m",
-      mt: "none",
+      mt: "xl",
       mb: "xl",
-      ml: "xl",
       children: jsx(SummaryRowLink, {
         "data-testid": `page-ref-${index}`,
         href: "#",
@@ -8579,9 +8571,9 @@ const FormStepperPageReviewer = props => {
 };
 withAjvProps(withTranslateProps(withJsonFormsLayoutProps(FormStepperPageReviewer)));
 
-let _$4 = t => t,
-  _t$4;
-const BackButtonWrapper = styled.span(_t$4 || (_t$4 = _$4`
+let _$5 = t => t,
+  _t$5;
+const BackButtonWrapper = styled.span(_t$5 || (_t$5 = _$5`
   .back-link::before {
     content: '';
     display: inline-block;
@@ -8883,8 +8875,8 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-let _$3 = t => t,
-  _t$3;
+let _$4 = t => t,
+  _t$4;
 const GoAContextMenuIcon = props => {
   return jsx(GoAIconButton, {
     icon: props.type,
@@ -8895,7 +8887,7 @@ const GoAContextMenuIcon = props => {
     disabled: props.disabled
   });
 };
-const GoAContextMenu = styled.div(_t$3 || (_t$3 = _$3`
+const GoAContextMenu = styled.div(_t$4 || (_t$4 = _$4`
   display: flex;
   align-items: center;
   background-color: #fff;
@@ -9322,8 +9314,8 @@ function objectListReducer(state, action) {
   }
 }
 
-let _$2 = t => t,
-  _t$2,
+let _$3 = t => t,
+  _t$3,
   _t2$2,
   _t3$1,
   _t4$1,
@@ -9343,18 +9335,18 @@ let _$2 = t => t,
   _t18,
   _t19,
   _t20;
-const DeleteDialogContent = styled.div(_t$2 || (_t$2 = _$2`
+const DeleteDialogContent = styled.div(_t$3 || (_t$3 = _$3`
   margin-bottom: var(--goa-space-m);
 `));
-const NonEmptyCellStyle = styled.div(_t2$2 || (_t2$2 = _$2`
+const NonEmptyCellStyle = styled.div(_t2$2 || (_t2$2 = _$3`
   goa-table thead th {
     background-color: #000:
   }
 `));
-const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$2`
+const ToolBarHeader = styled.div(_t3$1 || (_t3$1 = _$3`
   margin-bottom: var(--goa-space-l);
 `));
-const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$2`
+const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$3`
   margin-bottom: var(--goa-space-l);
 
   span {
@@ -9362,77 +9354,77 @@ const ObjectArrayTitle = styled.h3(_t4$1 || (_t4$1 = _$2`
     font-size: var(--goa-font-size-2);
   }
 `));
-const RequiredSpan = styled.span(_t5$1 || (_t5$1 = _$2`
+const RequiredSpan = styled.span(_t5$1 || (_t5$1 = _$3`
   color: #666666;
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-2);
 `));
-const TextCenter = styled.div(_t6$1 || (_t6$1 = _$2`
+const TextCenter = styled.div(_t6$1 || (_t6$1 = _$3`
   text-align: center;
 `));
-const SideMenuItem = styled.div(_t7 || (_t7 = _$2`
+const SideMenuItem = styled.div(_t7 || (_t7 = _$3`
   &:hover {
     background: #f1f1f1;
   }
 `));
-const RowFlex = styled.div(_t8 || (_t8 = _$2`
+const RowFlex = styled.div(_t8 || (_t8 = _$3`
   display: flex;
   align-items: stretch;
 `));
-const RowFlexMenu = styled.div(_t9 || (_t9 = _$2`
+const RowFlexMenu = styled.div(_t9 || (_t9 = _$3`
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #dcdcdc;
 `));
-const FlexTabs = styled.div(_t10 || (_t10 = _$2`
+const FlexTabs = styled.div(_t10 || (_t10 = _$3`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
   margin-right: 1.5rem;
 `));
-const FlexForm = styled.div(_t11 || (_t11 = _$2`
+const FlexForm = styled.div(_t11 || (_t11 = _$3`
   flex-direction: column;
   margin: 1.5rem 0;
   flex: 3;
 `));
-const TabName = styled.div(_t12 || (_t12 = _$2`
+const TabName = styled.div(_t12 || (_t12 = _$3`
   margin: 1rem 0 1rem 1rem;
   font-weight: 700;
 `));
-const Trash = styled.div(_t13 || (_t13 = _$2`
+const Trash = styled.div(_t13 || (_t13 = _$3`
   margin: 0.75rem 1.25rem 0.75rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t14 || (_t14 = _$2`
+const ListContainer = styled.div(_t14 || (_t14 = _$3`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t15 || (_t15 = _$2`
+const TableTHHeader = styled.th(_t15 || (_t15 = _$3`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t16 || (_t16 = _$2`
+const ObjectArrayWarningIconDiv = styled.div(_t16 || (_t16 = _$3`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const ListWithDetailWarningIconDiv = styled.div(_t17 || (_t17 = _$2`
+const ListWithDetailWarningIconDiv = styled.div(_t17 || (_t17 = _$3`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-3);
   color: var(--goa-color-interactive-error);
 `));
-styled.label(_t18 || (_t18 = _$2`
+styled.label(_t18 || (_t18 = _$3`
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-3);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.div(_t19 || (_t19 = _$2`
+styled.div(_t19 || (_t19 = _$3`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -9440,7 +9432,7 @@ styled.div(_t19 || (_t19 = _$2`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t20 || (_t20 = _$2`
+const HilightCellWarning = styled.div(_t20 || (_t20 = _$3`
   background-color: var(--goa-color-warning-default);
 `));
 
@@ -10715,14 +10707,14 @@ const ListWithDetailsControl = props => {
 const GoAListWithDetailsControlRenderer = withJsonFormsArrayLayoutProps(ListWithDetailsControl);
 const GoAListWithDetailsTester = rankWith(3, and(uiTypeIs('ListWithDetail')));
 
-let _$1 = t => t,
-  _t$1,
+let _$2 = t => t,
+  _t$2,
   _t2$1,
   _t3,
   _t4,
   _t5,
   _t6;
-const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
+const SearchBox = styled.div(_t$2 || (_t$2 = _$2`
   position: relative;
 
   .suggestions {
@@ -10764,7 +10756,7 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
     pointer-events: none; /* Prevent spinner from interfering with clicks */
   }
 `));
-const AddressIndent = styled.div(_t2$1 || (_t2$1 = _$1`
+const AddressIndent = styled.div(_t2$1 || (_t2$1 = _$2`
   margin: 0 0 var(--goa-space-m) 0;
   text-wrap: wrap;
   word-break: break-word;
@@ -10772,20 +10764,20 @@ const AddressIndent = styled.div(_t2$1 || (_t2$1 = _$1`
   border-radius: var(--goa-border-radius-xl);
   padding: var(--goa-space-l);
 `));
-const TextWrap = styled.p(_t3 || (_t3 = _$1`
+const TextWrap = styled.p(_t3 || (_t3 = _$2`
   text-wrap: auto;
   word-break: break-word;
 `));
-const TextWrapDiv = styled.div(_t4 || (_t4 = _$1`
+const TextWrapDiv = styled.div(_t4 || (_t4 = _$2`
   text-wrap: auto;
   word-break: break-word;
 `));
-const LabelDiv = styled.div(_t5 || (_t5 = _$1`
+const LabelDiv = styled.div(_t5 || (_t5 = _$2`
   font-size: var(--goa-font-size-2);
   padding-bottom: var(--goa-space-l);
 `));
 /* istanbul ignore next */
-const ListItem = styled.li(_t6 || (_t6 = _$1`
+const ListItem = styled.li(_t6 || (_t6 = _$2`
   background-color: ${0};
   color: ${0};
   font-weight: ${0};
@@ -11073,10 +11065,10 @@ function handleAddressKeyDown(key, value, activeIndex, suggestions, onInputChang
   return activeIndex;
 }
 
-let _ = t => t,
-  _t,
+let _$1 = t => t,
+  _t$1,
   _t2;
-const HelpContentDiv = styled.div(_t || (_t = _`
+const HelpContentDiv = styled.div(_t$1 || (_t$1 = _$1`
   .parent-label {
     font-size: 24px;
     margin-bottom: var(--goa-space-m);
@@ -11101,7 +11093,7 @@ const HelpContentDiv = styled.div(_t || (_t = _`
     margin: var(--goa-space-2xs) 0 var(--goa-space-2xs) 0;
   }
 `));
-const InvalidMarkdown = styled.div(_t2 || (_t2 = _`
+const InvalidMarkdown = styled.div(_t2 || (_t2 = _$1`
   color: var(--goa-color-interactive-error);
 `));
 
@@ -12187,6 +12179,179 @@ const GoAInputBaseFullNameDobControlReview = withJsonFormsAllOfProps(FullNameDob
 const isFullNameDoB = createSchemaMatchTester(['firstName', 'middleName', 'lastName', 'dateOfBirth'], true);
 const FullNameDobTester = rankWith(4, isFullNameDoB);
 
+let _ = t => t,
+  _t;
+const PhoneGrid = styled.div(_t || (_t = _`
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 0.2rem;
+  align-items: start;
+
+  goa-form-item {
+    margin-right: 0 !important;
+  }
+`));
+const PHONE_REGEX = /^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;
+const PhoneNumberWithTypeControl = props => {
+  const {
+    data,
+    path,
+    handleChange,
+    enabled,
+    visible,
+    required
+  } = props;
+  const [formData, setFormData] = useState(data || {});
+  const [error, setError] = useState(undefined);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateFormData = updated => {
+    setFormData(updated);
+    if (updated.number && !PHONE_REGEX.test(updated.number)) {
+      setError('Enter a valid phone number (e.g., (780) 123-4567)');
+    } else {
+      setError(undefined);
+    }
+    handleChange(path, updated);
+  };
+  return jsx(Visible, {
+    visible: visible,
+    children: jsxs(PhoneGrid, {
+      children: [jsx(GoAFormItem, {
+        label: "Phone type",
+        requirement: required ? 'required' : undefined,
+        children: jsxs(GoADropdown, {
+          name: "type",
+          value: formData.type || '',
+          disabled: !enabled,
+          onChange: (name, value) => updateFormData(Object.assign({}, formData, {
+            type: value
+          })),
+          children: [jsx(GoADropdownItem, {
+            value: "Mobile"
+          }), jsx(GoADropdownItem, {
+            value: "Landline"
+          })]
+        })
+      }), jsx(GoAFormItem, {
+        label: "Phone number",
+        error: error,
+        requirement: required ? 'required' : undefined,
+        children: jsx(GoAInput, {
+          type: "tel",
+          name: "number",
+          placeholder: "(000) 000-0000",
+          value: formData.number || '',
+          disabled: !enabled,
+          onChange: (name, value) => updateFormData(Object.assign({}, formData, {
+            number: value
+          }))
+        })
+      })]
+    })
+  });
+};
+const GoAPhoneNumberWithTypeControl = withJsonFormsControlProps(PhoneNumberWithTypeControl);
+
+const PhoneNumberControl = props => {
+  const {
+    data,
+    path,
+    schema,
+    handleChange,
+    enabled,
+    visible,
+    required
+  } = props;
+  const [error, setError] = useState('');
+  const handleInputChange = (name, value) => {
+    if (value && !PHONE_REGEX.test(value)) {
+      setError('Must be a valid 10-digit phone number in format (000) 000-0000');
+    } else {
+      setError('');
+    }
+    handleChange(path, value);
+  };
+  return jsx(Visible, {
+    visible: visible,
+    children: jsx(GoAFormItem, {
+      label: (schema === null || schema === void 0 ? void 0 : schema.title) || 'Phone number',
+      requirement: required ? 'required' : undefined,
+      error: error,
+      testId: `form-item-${path}`,
+      children: jsx(GoAInput, {
+        type: "tel",
+        name: path,
+        disabled: !enabled,
+        "aria-label": "phone number input",
+        testId: `phone-input-${path}`,
+        value: data || '',
+        onChange: (name, value) => handleInputChange(name, value),
+        placeholder: "(000) 000-0000",
+        width: "100%"
+      })
+    })
+  });
+};
+const GoAPhoneNumberControl = withJsonFormsControlProps(PhoneNumberControl);
+
+const isPhoneNumber = createSchemaMatchTester(['phoneNumber'], false);
+const PhoneNumberTester = rankWith(3, isPhoneNumber);
+
+const PhoneNumberReviewControl = props => {
+  const {
+    data,
+    id,
+    required
+  } = props;
+  return jsx(GoAFormItem, {
+    label: "Phone number",
+    error: required && !data ? 'Phone number is required' : '',
+    requirement: required ? 'required' : undefined,
+    children: jsx(TextWrapDiv, {
+      children: jsx("div", {
+        "data-testid": `phone-control-${id}`,
+        children: data || ''
+      })
+    })
+  });
+};
+const GoAInputBasePhoneNumberReviewControl = withJsonFormsAllOfProps(PhoneNumberReviewControl);
+
+const isPhoneNumberWithType = createSchemaMatchTester(['number', 'type'], true);
+const PhoneNumberWithTypeTester = rankWith(4, isPhoneNumberWithType);
+
+const PhoneNumberWithTypeReviewControl = props => {
+  const {
+    data,
+    id,
+    required
+  } = props;
+  return jsxs(PhoneGrid, {
+    children: [jsx(GoAFormItem, {
+      label: "Phone number",
+      error: required && !(data === null || data === void 0 ? void 0 : data.number) ? 'Phone number is required' : '',
+      requirement: required ? 'required' : undefined,
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `phone-number-control-${id}`,
+          children: (data === null || data === void 0 ? void 0 : data.number) || ''
+        })
+      })
+    }), jsx(GoAFormItem, {
+      label: "Phone type",
+      error: required && !(data === null || data === void 0 ? void 0 : data.type) ? 'Phone type is required' : '',
+      requirement: required ? 'required' : undefined,
+      children: jsx(TextWrapDiv, {
+        children: jsx("div", {
+          "data-testid": `phone-type-control-${id}`,
+          children: (data === null || data === void 0 ? void 0 : data.type) || ''
+        })
+      })
+    })]
+  });
+};
+const GoAInputBasePhoneNumberWithTypeReviewControl = withJsonFormsAllOfProps(PhoneNumberWithTypeReviewControl);
+
 var uncurryThis$1 = functionUncurryThis;
 
 // eslint-disable-next-line es/no-set -- safe
@@ -13316,6 +13481,12 @@ const GoAReviewRenderers = [...GoABaseReviewRenderers, {
 }, {
   tester: AddressLookUpTester,
   renderer: withJsonFormsControlProps(AddressLookUpControlReview)
+}, {
+  tester: PhoneNumberTester,
+  renderer: withJsonFormsControlProps(PhoneNumberReviewControl)
+}, {
+  tester: PhoneNumberWithTypeTester,
+  renderer: withJsonFormsControlProps(PhoneNumberWithTypeReviewControl)
 }];
 const GoARenderers = [...GoABaseRenderers, {
   tester: CategorizationStepperRendererTester,
@@ -13335,10 +13506,16 @@ const GoARenderers = [...GoABaseRenderers, {
 }, {
   tester: FullNameDobTester,
   renderer: withJsonFormsControlProps(FullNameDobControl)
+}, {
+  tester: PhoneNumberTester,
+  renderer: withJsonFormsControlProps(PhoneNumberControl)
+}, {
+  tester: PhoneNumberWithTypeTester,
+  renderer: withJsonFormsControlProps(PhoneNumberWithTypeControl)
 }, {
   tester: GoACalculationControlTester,
   renderer: GoACalculationControl
 }];
 const GoACells = [...InputCells];
 
-export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, AddressLoopUpControlTableReview, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationPagesRendererTester, CategorizationStepperRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormPageStepper, FormPagesView, FormStepper, FormStepperControl, FormStepperPagesControl, FormStepperReviewControl, FormStepperReviewer, FormStepperView, FullNameControl, FullNameControlReview, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABaseTableReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACalculationControl, GoACalculationControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEmailControl, GoAEmailControlTester, GoAEmailInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputBaseFullNameControlReview, GoAInputBaseFullNameDobControlReview, GoAInputBaseTableReview, GoAInputBaseTableReviewControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputEmailControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, categoriesAreValid, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };
+export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, AddressLoopUpControlTableReview, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationPagesRendererTester, CategorizationStepperRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormPageStepper, FormPagesView, FormStepper, FormStepperControl, FormStepperPagesControl, FormStepperReviewControl, FormStepperReviewer, FormStepperView, FullNameControl, FullNameControlReview, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABaseTableReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACalculationControl, GoACalculationControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEmailControl, GoAEmailControlTester, GoAEmailInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputBaseFullNameControlReview, GoAInputBaseFullNameDobControlReview, GoAInputBasePhoneNumberReviewControl, GoAInputBasePhoneNumberWithTypeReviewControl, GoAInputBaseTableReview, GoAInputBaseTableReviewControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputEmailControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoAPhoneNumberControl, GoAPhoneNumberWithTypeControl, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, PHONE_REGEX, PhoneGrid, PhoneNumberControl, PhoneNumberReviewControl, PhoneNumberTester, PhoneNumberWithTypeControl, PhoneNumberWithTypeReviewControl, PhoneNumberWithTypeTester, RadioGroup, categoriesAreValid, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, isPhoneNumber, isPhoneNumberWithType, registerReducer, resolveRefs, tryResolveRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.27.0",
+  "version": "2.28.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/FormStepper/styled-components.d.ts

@@ -17,7 +17,6 @@ export declare const TableReviewItem: import("styled-components/dist/types").ISt
 export declare const TableReviewPageTitleRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewCategoryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const CategoryStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
-export declare const TocPageRef: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 export declare const CompletionStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface PageStepperRowProps {
     disabled: boolean;

package/src/lib/Controls/PhoneNumber/PhoneNumberControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from '@jsonforms/core';
+type PhoneNumberControlProps = ControlProps;
+export declare const PhoneNumberControl: (props: PhoneNumberControlProps) => JSX.Element;
+export declare const GoAPhoneNumberControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export {};

package/src/lib/Controls/PhoneNumber/PhoneNumberReviewControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from '@jsonforms/core';
+type PhoneNumberReviewControlProps = ControlProps;
+export declare const PhoneNumberReviewControl: (props: PhoneNumberReviewControlProps) => JSX.Element;
+export declare const GoAInputBasePhoneNumberReviewControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export {};

package/src/lib/Controls/PhoneNumber/PhoneNumberTester.d.ts

@@ -0,0 +1,3 @@
+import { RankedTester } from '@jsonforms/core';
+export declare const isPhoneNumber: import("@jsonforms/core").Tester;
+export declare const PhoneNumberTester: RankedTester;

package/src/lib/Controls/PhoneNumber/PhoneNumberTypeTester.d.ts

@@ -0,0 +1,2 @@
+export declare const isPhoneNumberWithType: import("@jsonforms/core").Tester;
+export declare const PhoneNumberWithTypeTester: (uischema: import("@jsonforms/core").UISchemaElement, schema: import("@jsonforms/core").JsonSchema, context: import("@jsonforms/core").TesterContext) => number;

package/src/lib/Controls/PhoneNumber/PhoneNumberWithTypeControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from '@jsonforms/core';
+export declare const PhoneGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PHONE_REGEX: RegExp;
+export declare const PhoneNumberWithTypeControl: (props: ControlProps) => JSX.Element;
+export declare const GoAPhoneNumberWithTypeControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/PhoneNumber/PhoneNumberWithTypeReviewControl.d.ts

@@ -0,0 +1,5 @@
+import { ControlProps } from '@jsonforms/core';
+type PhoneNumberWithTypeReviewProps = ControlProps;
+export declare const PhoneNumberWithTypeReviewControl: (props: PhoneNumberWithTypeReviewProps) => JSX.Element;
+export declare const GoAInputBasePhoneNumberWithTypeReviewControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export {};

package/src/lib/Controls/PhoneNumber/index.d.ts

@@ -0,0 +1,6 @@
+export * from './PhoneNumberControl';
+export * from './PhoneNumberTester';
+export * from './PhoneNumberReviewControl';
+export * from './PhoneNumberWithTypeControl';
+export * from './PhoneNumberTypeTester';
+export * from './PhoneNumberWithTypeReviewControl';

package/src/lib/Controls/index.d.ts

@@ -5,4 +5,5 @@ export * from './ObjectArray';
 export * from './AddressLookup';
 export * from './FullName';
 export * from './FullNameDOB';
+export * from './PhoneNumber';
 export * from './Calculation';