@abgov/jsonforms-components 2.47.8 → 2.48.0

package/index.esm.js

@@ -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));
 };
@@ -10470,11 +10531,13 @@ const ContextProviderFactory = () => new ContextProviderClass().setup;
 const JsonFormContext = /*#__PURE__*/createContext(null);
 
 const RenderStepElements = props => {
+  var _props$category;
   const memoizedSchema = useMemo(() => Object.assign({}, props.schema), [props.schema]);
   return jsx(Visible, {
     visible: props.visible,
-    "data-testid": `${props.path}-categories-${props.categoryIndex}`,
+    "data-testid": `${(props == null ? void 0 : props.path) || ((_props$category = props.category) == null ? void 0 : _props$category.label)}-categories-${props.categoryIndex}`,
     children: props.category.elements.map((uiSchema, index) => {
+      var _props$category2;
       return jsx(JsonFormsDispatch, {
         schema: memoizedSchema,
         uischema: uiSchema,
@@ -10483,7 +10546,7 @@ const RenderStepElements = props => {
         path: props.path,
         visible: props.visible,
         enabled: props.enabled
-      }, `${props.path}-category-page-${index}`);
+      }, `${(props == null ? void 0 : props.path) || ((_props$category2 = props.category) == null ? void 0 : _props$category2.label)}-category-page-${index}`);
     })
   });
 };
@@ -13422,6 +13485,7 @@ const TaskList = ({
   subtitle,
   isValid,
   hideSummary,
+  hideProgress,
   additionalInstructions
 }) => {
   const testid = 'table-of-contents';
@@ -13456,7 +13520,7 @@ const TaskList = ({
         mt: "none",
         mb: "xl",
         children: subtitle
-      }), jsx(ApplicationStatus, {
+      }), !hideProgress && jsx(ApplicationStatus, {
         completedGroups: completedPages,
         totalGroups: totalPages
       }), jsx(GoabTable, {
@@ -13816,7 +13880,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);
@@ -13835,7 +13899,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));
   }
@@ -16342,26 +16407,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.8",
+  "version": "2.48.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/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>;