@abgov/jsonforms-components 2.47.9 → 2.48.1

package/index.esm.js

@@ -1,11 +1,11 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useCallback, useRef, useState, useLayoutEffect } from 'react';
-import { GoabFormItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabModal, GoabButtonGroup, GoabTable, GoabContainer, GoabDropdown, GoabDropdownItem, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
+import { GoabFormItem, GoabInput, GoabTextArea, GoabCallout, GoabRadioGroup, GoabRadioItem, GoabCheckbox, GoabIcon, GoabButton, GoabGrid, GoabIconButton, GoabTable, GoabModal, GoabButtonGroup, GoabContainer, GoabDropdown, GoabDropdownItem, GoabDetails, GoabFormStepper, GoabFormStep, GoabPages, GoabBadge, GoabText, GoabFileUploadInput, GoabCircularProgress, GoabSpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
-import { isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, isBooleanControl, createDefaultValue, Paths, toDataPath, Resolve, schemaMatches, getAjv, or, isObjectArrayControl, isPrimitiveArrayControl, composePaths, schemaTypeIs, formatIs, hasType, isCategorization, isLayout } from '@jsonforms/core';
+import { isVisible, isEnabled, deriveLabelForUISchemaElement, rankWith, isStringControl, and, optionIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, uiTypeIs, isControl as isControl$1, isEnumControl, isBooleanControl, createDefaultValue, Paths, Resolve, toDataPath, schemaMatches, getAjv, or, isObjectArrayControl, isPrimitiveArrayControl, composePaths, schemaTypeIs, formatIs, hasType, isCategorization, isLayout } from '@jsonforms/core';
 import * as _$c from 'lodash';
 import ___default, { isEqual, isObject as isObject$i, isEmpty as isEmpty$1 } from 'lodash';
 import { useJsonForms, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsArrayLayoutProps, withJsonFormsLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
@@ -194,9 +194,9 @@ var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAg
 var global$r = global$t;
 var userAgent$4 = engineUserAgent;
 
-var process$3 = global$r.process;
+var process$4 = global$r.process;
 var Deno$1 = global$r.Deno;
-var versions = process$3 && process$3.versions || Deno$1 && Deno$1.version;
+var versions = process$4 && process$4.versions || Deno$1 && Deno$1.version;
 var v8 = versions && versions.v8;
 var match, version;
 
@@ -3964,7 +3964,7 @@ var IS_NODE$4 = engineIsNode;
 
 var set = global$c.setImmediate;
 var clear = global$c.clearImmediate;
-var process$2 = global$c.process;
+var process$3 = global$c.process;
 var Dispatch = global$c.Dispatch;
 var Function$1 = global$c.Function;
 var MessageChannel = global$c.MessageChannel;
@@ -4020,7 +4020,7 @@ if (!set || !clear) {
   // Node.js 0.8-
   if (IS_NODE$4) {
     defer = function (id) {
-      process$2.nextTick(runner(id));
+      process$3.nextTick(runner(id));
     };
   // Sphere (JS game engine) Dispatch API
   } else if (Dispatch && Dispatch.now) {
@@ -4122,7 +4122,7 @@ var IS_NODE$3 = engineIsNode;
 
 var MutationObserver = global$a.MutationObserver || global$a.WebKitMutationObserver;
 var document$2 = global$a.document;
-var process$1 = global$a.process;
+var process$2 = global$a.process;
 var Promise$1 = global$a.Promise;
 var microtask$1 = safeGetBuiltIn$1('queueMicrotask');
 var notify$1, toggle, node, promise, then;
@@ -4133,7 +4133,7 @@ if (!microtask$1) {
 
   var flush = function () {
     var parent, fn;
-    if (IS_NODE$3 && (parent = process$1.domain)) parent.exit();
+    if (IS_NODE$3 && (parent = process$2.domain)) parent.exit();
     while (fn = queue.get()) try {
       fn();
     } catch (error) {
@@ -4165,7 +4165,7 @@ if (!microtask$1) {
   // Node.js without promises
   } else if (IS_NODE$3) {
     notify$1 = function () {
-      process$1.nextTick(flush);
+      process$2.nextTick(flush);
     };
   // for other environments - macrotask based on:
   // - setImmediate
@@ -4320,7 +4320,7 @@ var PromiseConstructor = NativePromiseConstructor$2;
 var PromisePrototype = NativePromisePrototype$1;
 var TypeError$3 = global$7.TypeError;
 var document$1 = global$7.document;
-var process = global$7.process;
+var process$1 = global$7.process;
 var newPromiseCapability$1 = newPromiseCapabilityModule$3.f;
 var newGenericPromiseCapability = newPromiseCapability$1;
 
@@ -4412,7 +4412,7 @@ var onUnhandled = function (state) {
     if (IS_UNHANDLED) {
       result = perform$2(function () {
         if (IS_NODE$1) {
-          process.emit('unhandledRejection', value, promise);
+          process$1.emit('unhandledRejection', value, promise);
         } else dispatchEvent(UNHANDLED_REJECTION, promise, value);
       });
       // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should
@@ -4430,7 +4430,7 @@ var onHandleUnhandled = function (state) {
   call$c(task, global$7, function () {
     var promise = state.facade;
     if (IS_NODE$1) {
-      process.emit('rejectionHandled', promise);
+      process$1.emit('rejectionHandled', promise);
     } else dispatchEvent(REJECTION_HANDLED, promise, state.value);
   });
 };
@@ -4518,7 +4518,7 @@ if (FORCED_PROMISE_CONSTRUCTOR$4) {
     state.parent = true;
     reaction.ok = isCallable$4(onFulfilled) ? onFulfilled : true;
     reaction.fail = isCallable$4(onRejected) && onRejected;
-    reaction.domain = IS_NODE$1 ? process.domain : undefined;
+    reaction.domain = IS_NODE$1 ? process$1.domain : undefined;
     if (state.state === PENDING) state.reactions.add(reaction);
     else microtask(function () {
       callReaction(reaction, state);
@@ -7320,6 +7320,31 @@ const Dropdown = props => {
   }, id);
 };
 
+//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
+ * @param value value to be returned after a period of delay
+ * @param delay time in ms to apply the delay
+ * @returns value after the delay timer
+ */
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const isTestEnv = process.env.NODE_ENV === 'test' || process.env.JEST_WORKER_ID !== undefined;
+  useEffect(() => {
+    if (isTestEnv) {
+      setDebouncedValue(value);
+      return;
+    }
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay, isTestEnv]);
+  return debouncedValue;
+}
+
 function fetchRegisterConfigFromOptions$1(options) {
   if (!(options != null && options.url) && !(options != null && options.urn)) return undefined;
   const config = Object.assign({}, options);
@@ -7355,6 +7380,21 @@ const GoAInputText = props => {
     isVisited,
     setIsVisited
   } = props;
+  const [localValue, setLocalValue] = useState(data != null ? data : '');
+  const debouncedValue = useDebounce(localValue, 800);
+  useEffect(() => {
+    setLocalValue(data != null ? data : '');
+  }, [data]);
+  /* istanbul ignore next */
+  useEffect(() => {
+    // Only sync if debouncedValue differs from data and is not initial empty state
+    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
+      onChangeForInputControl({
+        value: debouncedValue,
+        controlProps: props
+      });
+    }
+  }, [debouncedValue]);
   const width = (_uischema$options$com = uischema == null || (_uischema$options = uischema.options) == null || (_uischema$options = _uischema$options.componentProps) == null ? void 0 : _uischema$options.width) != null ? _uischema$options$com : '100%';
   const registerCtx = useContext(JsonFormsRegisterContext);
   const registerConfig = fetchRegisterConfigFromOptions$1((_props$uischema = props.uischema) == null || (_props$uischema = _props$uischema.options) == null ? void 0 : _props$uischema.register);
@@ -7414,29 +7454,25 @@ const GoAInputText = props => {
       error: isVisited && errors.length > 0,
       type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text',
       disabled: !enabled,
-      value: data,
+      value: localValue,
       width: width,
       readonly: readOnly,
       maxLength: isSinField ? 11 : '',
       placeholder: placeholder,
-      ariaLabel: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`
+      name: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+      ariaLabel: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
+      testId: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`
     }, (_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.componentProps, {
       // maxLength={appliedUiSchemaOptions?.maxLength}
-      name: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
-      testId: (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
       onChange: detail => {
         let formattedValue = detail.value;
         if (schema && schema.title === sinTitle && detail.value !== '') {
           formattedValue = formatSin(detail.value);
         }
+        setLocalValue(formattedValue);
         if (isVisited === false && setIsVisited) {
           setIsVisited();
         }
-        onChangeForInputControl({
-          name: detail.name,
-          value: formattedValue,
-          controlProps: props
-        });
       },
       onBlur: detail => {
         if (isVisited === false && setIsVisited) {
@@ -7711,9 +7747,25 @@ const GoANumberInput = props => {
     errors,
     setIsVisited
   } = props;
+  const InputValue = data && data !== undefined ? data : '';
+  const [localValue, setLocalValue] = useState(InputValue);
+  const debouncedValue = useDebounce(localValue, 800);
+  useEffect(() => {
+    const newValue = data !== undefined ? data : '';
+    setLocalValue(newValue);
+  }, [data]);
+  /* istanbul ignore next */
+  useEffect(() => {
+    // Only sync if debouncedValue differs from data and is not initial empty state
+    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
+      onChangeForNumericControl({
+        value: String(debouncedValue),
+        controlProps: props
+      });
+    }
+  }, [debouncedValue]);
   const appliedUiSchemaOptions = Object.assign({}, config, uischema == null ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.placeholder) || (schema == null ? void 0 : schema.description) || '';
-  const InputValue = data && data !== undefined ? data : '';
   const clonedSchema = JSON.parse(JSON.stringify(schema));
   const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0.01;
   const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
@@ -7725,7 +7777,7 @@ const GoANumberInput = props => {
     error: isVisited && errors.length > 0,
     disabled: !enabled,
     readonly: readOnly,
-    value: InputValue,
+    value: localValue,
     placeholder: placeholder,
     step: StepValue,
     min: MinValue,
@@ -7744,14 +7796,10 @@ const GoANumberInput = props => {
       });
     },
     onChange: detail => {
+      setLocalValue(detail.value);
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
-      onChangeForNumericControl({
-        name: detail.name,
-        value: detail.value,
-        controlProps: props
-      });
     }
   }, uischema == null || (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.componentProps));
 };
@@ -7776,9 +7824,25 @@ const GoabInputInteger = props => {
     errors,
     setIsVisited
   } = props;
+  const InputValue = data && data !== undefined ? data : '';
+  const [localValue, setLocalValue] = useState(InputValue);
+  const debouncedValue = useDebounce(localValue, 800);
+  useEffect(() => {
+    const newValue = data !== undefined ? data : '';
+    setLocalValue(newValue);
+  }, [data]);
+  /* istanbul ignore next */
+  useEffect(() => {
+    // Only sync if debouncedValue differs from data and is not initial empty state
+    if (debouncedValue !== data && (debouncedValue !== '' || data !== undefined)) {
+      onChangeForNumericControl({
+        value: String(debouncedValue),
+        controlProps: props
+      });
+    }
+  }, [debouncedValue]);
   const appliedUiSchemaOptions = Object.assign({}, config, uischema == null ? void 0 : uischema.options);
   const placeholder = (appliedUiSchemaOptions == null ? void 0 : appliedUiSchemaOptions.placeholder) || (schema == null ? void 0 : schema.description) || '';
-  const InputValue = data && data !== undefined ? data : '';
   const clonedSchema = JSON.parse(JSON.stringify(schema));
   const StepValue = clonedSchema.multipleOf ? clonedSchema.multipleOf : 0;
   const MinValue = clonedSchema.minimum ? clonedSchema.minimum : '';
@@ -7791,7 +7855,7 @@ const GoabInputInteger = props => {
     width: width,
     disabled: !enabled,
     readonly: readOnly,
-    value: InputValue,
+    value: localValue,
     step: StepValue,
     min: MinValue,
     max: MaxValue,
@@ -7809,14 +7873,11 @@ const GoabInputInteger = props => {
       });
     },
     onChange: detail => {
+      // Update local state immediately for responsive UI
+      setLocalValue(detail.value);
       if (isVisited === false && setIsVisited) {
         setIsVisited();
       }
-      onChangeForNumericControl({
-        name: detail.name,
-        value: detail.value,
-        controlProps: props
-      });
     }
   }, uischema == null || (_uischema$options3 = uischema.options) == null ? void 0 : _uischema$options3.componentProps));
 };
@@ -8637,7 +8698,9 @@ let _$7 = t => t,
   _t23$1,
   _t24$1,
   _t25$1,
-  _t26$1;
+  _t26$1,
+  _t27$1,
+  _t28$1;
 const DeleteDialogContent = styled.div(_t$8 || (_t$8 = _$7`
   margin-bottom: var(--goa-space-m);
 `));
@@ -8669,9 +8732,7 @@ const TextCenter = styled.div(_t7$1 || (_t7$1 = _$7`
   text-align: center;
 `));
 const SideMenuItem = styled.div(_t8$1 || (_t8$1 = _$7`
-  &:hover {
-    background: #f1f1f1;
-  }
+  margin-top: 1rem;
 `));
 const RowFlex = styled.div(_t9$1 || (_t9$1 = _$7`
   display: flex;
@@ -8680,9 +8741,20 @@ const RowFlex = styled.div(_t9$1 || (_t9$1 = _$7`
 `));
 const RowFlexMenu = styled.div(_t0$1 || (_t0$1 = _$7`
   display: flex;
-  flex-direction: row;
-  border: 1px solid #dcdcdc;
-  margin-top: 1rem;
+  flex-direction: column;
+  align-items: stretch;
+  border: 1px solid var(--goa-color-greyscale-300);
+  border-radius: var(--goa-border-radius-m);
+  margin-top: var(--goa-space-xs);
+  background-color: var(--goa-color-greyscale-white);
+  padding: 0;
+  gap: 0;
+  position: relative;
+  overflow: visible;
+
+  &:hover {
+    border-color: var(--goa-color-greyscale-400);
+  }
 `));
 const FlexTabs = styled.div(_t1$1 || (_t1$1 = _$7`
   flex-direction: column;
@@ -8721,44 +8793,41 @@ const ListContainer = styled.div(_t14$1 || (_t14$1 = _$7`
 styled.div(_t15$1 || (_t15$1 = _$7`
   padding: 0 0 var(--goa-space-l) 0;
 `));
-const IconPadding = styled.div(_t16$1 || (_t16$1 = _$7`
-  padding: 0.9rem 0.5rem 0 0;
-`));
-const UpdateListContainer = styled.div(_t17$1 || (_t17$1 = _$7`
+const UpdateListContainer = styled.div(_t16$1 || (_t16$1 = _$7`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
 `));
-styled.div(_t18$1 || (_t18$1 = _$7`
+styled.div(_t17$1 || (_t17$1 = _$7`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t19$1 || (_t19$1 = _$7`
+const TableTHHeader = styled.th(_t18$1 || (_t18$1 = _$7`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t20$1 || (_t20$1 = _$7`
+const ObjectArrayWarningIconDiv = styled.div(_t19$1 || (_t19$1 = _$7`
   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(_t21$1 || (_t21$1 = _$7`
+const ListWithDetailWarningIconDiv = styled.div(_t20$1 || (_t20$1 = _$7`
   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(_t22$1 || (_t22$1 = _$7`
+styled.label(_t21$1 || (_t21$1 = _$7`
   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(_t23$1 || (_t23$1 = _$7`
+styled.div(_t22$1 || (_t22$1 = _$7`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -8766,10 +8835,10 @@ styled.div(_t23$1 || (_t23$1 = _$7`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t24$1 || (_t24$1 = _$7`
+const HilightCellWarning = styled.div(_t23$1 || (_t23$1 = _$7`
   background-color: var(--goa-color-warning-default);
 `));
-const FixTableHeaderAlignment = styled.div(_t25$1 || (_t25$1 = _$7`
+const FixTableHeaderAlignment = styled.div(_t24$1 || (_t24$1 = _$7`
   table thead th:nth-child(3) {
     text-align: center;
   }
@@ -8778,11 +8847,31 @@ const FixTableHeaderAlignment = styled.div(_t25$1 || (_t25$1 = _$7`
     text-align: center;
   }
 `));
-const ListWithDetailsReviewCellDiv = styled.div(_t26$1 || (_t26$1 = _$7`
+const ListWithDetailsReviewCellDiv = styled.div(_t25$1 || (_t25$1 = _$7`
   display: 'flex';
   flex-direction: 'column';
   text-align: 'start';
 `));
+const IconsContainer = styled.div(_t26$1 || (_t26$1 = _$7`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--goa-space-xs);
+  padding-bottom: var(--goa-space-xs);
+`));
+const TableContentContainer = styled.div(_t27$1 || (_t27$1 = _$7`
+  padding: var(--goa-space-l);
+`));
+const NoDataMessage = styled.div(_t28$1 || (_t28$1 = _$7`
+  padding: var(--goa-space-xl) var(--goa-space-l);
+  color: var(--goa-color-greyscale-700);
+  font: var(--goa-typography-body-m);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+`));
 
 const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
   data,
@@ -9064,6 +9153,134 @@ const NonEmptyRowComponent$1 = ({
     }) : null
   }, childPath);
 };
+function isControlElement(element) {
+  return element.type === 'Control';
+}
+function isLayoutElement(element) {
+  return 'elements' in element;
+}
+function extractPaths(uiSchema) {
+  if (!uiSchema) {
+    return [];
+  }
+  if (isControlElement(uiSchema)) {
+    return uiSchema.scope ? [toDataPath(uiSchema.scope)] : [];
+  }
+  if (isLayoutElement(uiSchema)) {
+    return uiSchema.elements.flatMap(extractPaths);
+  }
+  return [];
+}
+function getValue(obj, path) {
+  return path.replace(/^\./, '').split('.').reduce((acc, part) => {
+    if (acc && typeof acc === 'object' && part in acc) {
+      return acc[part];
+    }
+    return undefined;
+  }, obj);
+}
+function findLabelForPath(path, uiSchema, schema) {
+  if (!uiSchema) {
+    return path;
+  }
+  if (isControlElement(uiSchema)) {
+    const controlPath = uiSchema.scope ? toDataPath(uiSchema.scope) : '';
+    if (controlPath === path) {
+      const label = uiSchema.label;
+      if (typeof label === 'string') {
+        return label;
+      } else if (typeof label === 'object' && label !== null && 'text' in label) {
+        return label.text || path;
+      }
+      return path;
+    }
+  }
+  if (isLayoutElement(uiSchema)) {
+    for (const element of uiSchema.elements) {
+      const label = findLabelForPath(path, element, schema);
+      if (label !== path) {
+        return label;
+      }
+    }
+  }
+  if (schema != null && schema.properties) {
+    const propertyKey = path.split('.').pop();
+    if (propertyKey && schema.properties[propertyKey]) {
+      const property = schema.properties[propertyKey];
+      if (typeof property === 'object' && 'title' in property) {
+        return String(property.title) || path;
+      }
+    }
+  }
+  return path;
+}
+function generateSummaryPairs(rowData, detailUiSchema, schema) {
+  const paths = extractPaths(detailUiSchema);
+  if (paths.length === 0) {
+    return Object.entries(rowData).filter(([, value]) => value !== undefined && value !== null && value !== '').map(([key, value]) => ({
+      label: findLabelForPath(key, detailUiSchema, schema),
+      value
+    }));
+  }
+  return paths.map(path => {
+    const value = getValue(rowData, path);
+    const label = findLabelForPath(path, detailUiSchema, schema);
+    return {
+      label,
+      value
+    };
+  }).filter(({
+    value
+  }) => value !== undefined && value !== null && value !== '');
+}
+const SummaryDisplay = ({
+  rowData,
+  uischema,
+  schema
+}) => {
+  var _uischema$options10;
+  if (!rowData || Object.keys(rowData).length === 0) {
+    return jsx(NoDataMessage, {
+      children: "No data"
+    });
+  }
+  const pairs = generateSummaryPairs(rowData, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.detail, schema);
+  if (pairs.length === 0) {
+    return jsx(NoDataMessage, {
+      children: "No data"
+    });
+  }
+  return jsx(GoabTable, {
+    width: "100%",
+    mb: "none",
+    variant: "relaxed",
+    children: jsx("tbody", {
+      children: pairs.map((pair, index) => jsxs("tr", {
+        style: {
+          borderBottom: 'none'
+        },
+        children: [jsx("td", {
+          style: {
+            width: '50%',
+            fontWeight: '600',
+            border: 'none',
+            paddingTop: 'var(--goa-space-xs)',
+            paddingBottom: 'var(--goa-space-xs)'
+          },
+          children: pair.label
+        }), jsx("td", {
+          style: {
+            width: '50%',
+            border: 'none',
+            paddingTop: 'var(--goa-space-xs)',
+            paddingBottom: 'var(--goa-space-xs)'
+          },
+          children: String(pair.value)
+        })]
+      }, `${pair.label}-${index}`))
+    })
+  });
+};
 const MainItemComponent = ({
   childPath,
   rowIndex,
@@ -9073,10 +9290,12 @@ const MainItemComponent = ({
   currentTab,
   current,
   setCurrentListPage,
-  rowData
+  rowData,
+  uischema,
+  schema
 }) => {
   const displayName = Object.keys(rowData != null ? rowData : {}).length === 0 ? 'No data' : Object.values(rowData || {}).join(', ');
-  return jsx(SideMenuItem, {
+  return jsxs(SideMenuItem, {
     onClick: () => selectCurrentTab(rowIndex),
     onKeyDown: e => {
       if (e.key === 'ArrowRight') {
@@ -9091,62 +9310,32 @@ const MainItemComponent = ({
         }
       }
     },
-    children: jsxs(RowFlexMenu, {
+    children: [jsxs(IconsContainer, {
+      children: [jsx(GoabIconButton, {
+        disabled: !enabled,
+        icon: "create",
+        title: 'Edit',
+        testId: "edit button",
+        onClick: () => setCurrentListPage(currentTab + 1)
+      }), enabled ? jsx(GoabIconButton, {
+        disabled: !enabled,
+        icon: "trash",
+        title: 'Delete',
+        testId: "delete button",
+        onClick: () => openDeleteDialog(childPath, rowIndex, displayName)
+      }) : null]
+    }), jsx(RowFlexMenu, {
       tabIndex: 0,
-      children: [jsx(TabName, {
-        children: displayName
-      }), enabled ? jsx(Trash, {
-        children: jsx(GoabIconButton, {
-          disabled: !enabled,
-          icon: "trash",
-          title: 'remove',
-          testId: "remove the details",
-          onClick: () => openDeleteDialog(childPath, rowIndex, displayName)
-        })
-      }) : null, jsx(IconPadding, {
-        children: jsx(GoabIconButton, {
-          disabled: !enabled,
-          icon: "create",
-          title: 'edit',
-          testId: "edit button",
-          onClick: () => setCurrentListPage(currentTab + 1)
+      children: jsx(TableContentContainer, {
+        children: jsx(SummaryDisplay, {
+          rowData: rowData,
+          uischema: uischema,
+          schema: schema
         })
-      })]
-    })
+      })
+    })]
   });
 };
-function isControlElement(element) {
-  return element.type === 'Control';
-}
-function isLayoutElement(element) {
-  return 'elements' in element;
-}
-function extractPaths(uiSchema) {
-  if (!uiSchema) {
-    return [];
-  }
-  if (isControlElement(uiSchema)) {
-    return uiSchema.scope ? [toDataPath(uiSchema.scope)] : [];
-  }
-  if (isLayoutElement(uiSchema)) {
-    return uiSchema.elements.flatMap(extractPaths);
-  }
-  return [];
-}
-function getValue(obj, path) {
-  return path.split('.').reduce((acc, key) => acc && typeof acc === 'object' ? acc[key] : undefined, obj);
-}
-function orderRowData(rowData, detailUiSchema) {
-  const orderedPaths = extractPaths(detailUiSchema);
-  const ordered = {};
-  for (const path of orderedPaths) {
-    const value = getValue(rowData, path);
-    if (value !== undefined) {
-      ordered[path] = value;
-    }
-  }
-  return ordered;
-}
 function getEffectiveInstancePath(error) {
   var _error$params;
   if (error.keyword === 'required' && (_error$params = error.params) != null && _error$params.missingProperty) {
@@ -9289,16 +9478,16 @@ const MainTab = ({
   currentTab,
   current,
   setCurrentListPage,
-  uischema
+  uischema,
+  schema
 }) => {
-  var _uischema$options10, _core$errors;
+  var _core$errors;
   /* eslint-disable @typescript-eslint/no-explicit-any */
   const getDataAtPath = (data, path) => path.replace(/\[(\d+)\]/g, '.$1').split('.').reduce((acc, key) => acc ? acc[key] : undefined, data);
   const {
     core
   } = useJsonForms();
   const rowData = getDataAtPath(core == null ? void 0 : core.data, childPath);
-  const orderedRowData = orderRowData(rowData, uischema == null || (_uischema$options10 = uischema.options) == null ? void 0 : _uischema$options10.detail);
   function resolveField(e) {
     var _e$params;
     if (e.keyword === 'required') {
@@ -9375,7 +9564,7 @@ const MainTab = ({
     children: errorText ? jsx(GoabFormItem, {
       error: errorText,
       children: jsx(MainItemComponent, {
-        rowData: orderedRowData,
+        rowData: rowData,
         childPath: childPath,
         rowIndex: rowIndex,
         openDeleteDialog: openDeleteDialog,
@@ -9383,10 +9572,12 @@ const MainTab = ({
         enabled: enabled,
         currentTab: currentTab,
         current: current,
-        setCurrentListPage: setCurrentListPage
+        setCurrentListPage: setCurrentListPage,
+        uischema: uischema,
+        schema: schema
       })
     }) : jsx(MainItemComponent, {
-      rowData: orderedRowData,
+      rowData: rowData,
       childPath: childPath,
       rowIndex: rowIndex,
       openDeleteDialog: openDeleteDialog,
@@ -9394,7 +9585,9 @@ const MainTab = ({
       enabled: enabled,
       currentTab: currentTab,
       current: current,
-      setCurrentListPage: setCurrentListPage
+      setCurrentListPage: setCurrentListPage,
+      uischema: uischema,
+      schema: schema
     })
   }, childPath);
 };
@@ -13424,6 +13617,7 @@ const TaskList = ({
   subtitle,
   isValid,
   hideSummary,
+  hideProgress,
   additionalInstructions
 }) => {
   const testid = 'table-of-contents';
@@ -13458,7 +13652,7 @@ const TaskList = ({
         mt: "none",
         mb: "xl",
         children: subtitle
-      }), jsx(ApplicationStatus, {
+      }), !hideProgress && jsx(ApplicationStatus, {
         completedGroups: completedPages,
         totalGroups: totalPages
       }), jsx(GoabTable, {
@@ -13818,7 +14012,7 @@ const FormPagesView = props => {
     goToPage(index);
   };
   if (categories.length + 1 === activeId) {
-    var _props$uischema, _props$uischema2, _props$uischema3, _props$uischema4;
+    var _props$uischema, _props$uischema2, _props$uischema3, _props$uischema4, _props$uischema5;
     const patchedCategories = categories.map(c => {
       const scopes = getCategoryScopes(c);
       const hasData = hasDataInScopes(data, scopes);
@@ -13837,7 +14031,8 @@ const FormPagesView = props => {
       subtitle: (_props$uischema2 = props.uischema) == null || (_props$uischema2 = _props$uischema2.options) == null ? void 0 : _props$uischema2.subtitle,
       isValid: completedCount === visibleCats.length,
       hideSummary: (_props$uischema3 = props.uischema) == null || (_props$uischema3 = _props$uischema3.options) == null ? void 0 : _props$uischema3.hideSummary,
-      additionalInstructions: (_props$uischema4 = props.uischema) == null || (_props$uischema4 = _props$uischema4.options) == null ? void 0 : _props$uischema4.additionalInstructions
+      hideProgress: (_props$uischema4 = props.uischema) == null || (_props$uischema4 = _props$uischema4.options) == null ? void 0 : _props$uischema4.hideProgress,
+      additionalInstructions: (_props$uischema5 = props.uischema) == null || (_props$uischema5 = _props$uischema5.options) == null ? void 0 : _props$uischema5.additionalInstructions
     };
     return jsx(TaskList, Object.assign({}, tocProps));
   }
@@ -16344,26 +16539,6 @@ function handleAddressKeyDown(key, value, activeIndex, suggestions, onInputChang
   return activeIndex;
 }
 
-//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
- * @param value value to be returned after a period of delay
- * @param delay time in ms to apply the delay
- * @returns value after the delay timer
- */
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-
 const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
 const AddressLookUpControl = props => {
   var _schema$properties, _uischema$options, _uischema$options$com, _uischema$options2, _errors$addressLine;

package/package.json

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

@@ -16,6 +16,7 @@ export interface TocProps {
     subtitle?: string;
     isValid: boolean;
     hideSummary: boolean;
+    hideProgress: boolean;
     additionalInstructions?: string | AdditionalInstructionsConfig;
 }
 export declare const TaskList: React.FC<TocProps>;

package/src/lib/Controls/Inputs/InputNumberControl.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
 export type GoAInputNumberProps = CellProps & WithClassname & WithInputProps;
 export declare const GoANumberInput: (props: GoAInputNumberProps) => JSX.Element;
 export declare const GoANumberControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoANumberControlTester: RankedTester;
-export declare const GoAInputNumberControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
+export declare const GoAInputNumberControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -15,7 +15,6 @@ export declare const TabName: import("styled-components/dist/types").IStyledComp
 export declare const Trash: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DetailMargin: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconPadding: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const UpdateListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CompleteContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableTHHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
@@ -26,3 +25,6 @@ export declare const HasErrorLabel: import("styled-components/dist/types").IStyl
 export declare const HilightCellWarning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FixTableHeaderAlignment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ListWithDetailsReviewCellDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NoDataMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;