fix(ui): update DelayedOnChange to reflect changes in Form

packages/ui/src/DelayedOnChange/DelayedOnChange.ts

@@ -4,8 +4,8 @@ const emptyFunction = (): undefined => {
     return undefined;
 };
 
-interface ApplyValueCb {
-    (value: string, cb: (value: string) => void): void;
+export interface ApplyValueCb {
+    (value: string): void;
 }
 /**
  * This component is used to wrap Input and Textarea components to optimize form re-render.
@@ -16,22 +16,27 @@ interface ApplyValueCb {
  * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
  * a user stops typing for given period of time (400ms by default).
  */
-interface OnChangeCallable {
+export interface OnChangeCallable {
     (value: string, cb?: ApplyValueCb): void;
 }
+
 interface OnBlurCallable {
     (ev: React.SyntheticEvent): void;
 }
+
 interface OnKeyDownCallable {
     (ev: React.KeyboardEvent<HTMLInputElement>): void;
 }
+
 interface ChildrenCallableParams {
     value: string;
     onChange: OnChangeCallable;
 }
+
 interface ChildrenCallable {
     (params: ChildrenCallableParams): React.ReactElement;
 }
+
 export interface DelayedOnChangeProps {
     value?: string;
     delay?: number;
@@ -40,6 +45,7 @@ export interface DelayedOnChangeProps {
     onKeyDown?: OnKeyDownCallable;
     children: React.ReactNode | ChildrenCallable;
 }
+
 export const DelayedOnChange = ({ children, ...other }: DelayedOnChangeProps) => {
     const { onChange, delay = 400, value: initialValue } = other;
     const [value, setValue] = useState<string | undefined>(initialValue);
@@ -52,13 +58,13 @@ export const DelayedOnChange = ({ children, ...other }: DelayedOnChangeProps) =>
 
     const localTimeout = React.useRef<number | null>(null);
 
-    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {
+    const applyValue = (value: string) => {
         localTimeout.current && clearTimeout(localTimeout.current);
         localTimeout.current = null;
         if (!onChange) {
             return;
         }
-        onChange(value, callback);
+        onChange(value);
     };
 
     const onChangeLocal = React.useCallback((value: string) => {
@@ -108,22 +114,23 @@ export const DelayedOnChange = ({ children, ...other }: DelayedOnChangeProps) =>
             return;
         }
         ev.persist();
-        applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));
+        applyValue((ev.target as HTMLInputElement).value);
+        realOnBlur(ev);
     };
 
     // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
     const onKeyDown: OnKeyDownCallable = ev => {
         ev.persist();
         if (ev.key === "Tab") {
-            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));
+            applyValue((ev.target as HTMLInputElement).value);
+            realOnKeyDown(ev);
         } else if (ev.key === "Enter" && props["data-on-enter"]) {
-            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));
+            applyValue((ev.target as HTMLInputElement).value);
+            realOnKeyDown(ev);
         } else {
             realOnKeyDown(ev);
         }
     };
 
     return React.cloneElement(child, { ...props, onBlur, onKeyDown });
 };
-
-export default DelayedOnChange;

packages/ui/src/DelayedOnChange/index.ts

@@ -1,2 +1,2 @@
-export { default as DelayedOnChange } from "./DelayedOnChange";
+export * from "./DelayedOnChange";
 export { default as withDelayedOnChange } from "./withDelayedOnChange";

packages/ui/src/DelayedOnChange/withDelayedOnChange.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import Delayed, { DelayedOnChangeProps } from "./DelayedOnChange";
+import { DelayedOnChange, DelayedOnChangeProps } from "./DelayedOnChange";
 
 export default function withDelayedOnChange() {
     return function decorator(Component: React.ComponentType<DelayedOnChangeProps>) {
         return function WithDelayedOnChange(props: DelayedOnChangeProps) {
             const { value, onChange, ...rest } = props;
             return (
-                <Delayed value={value} onChange={onChange}>
+                <DelayedOnChange value={value} onChange={onChange}>
                     {({ value, onChange }) => (
                         <Component {...rest} value={value} onChange={onChange} />
                     )}
-                </Delayed>
+                </DelayedOnChange>
             );
         };
     };