@toptal/picasso-forms 49.0.1 → 49.2.0

package/FormCompound/index.d.ts

@@ -7,7 +7,7 @@ export declare const FormCompound: {
         (props: import("../Autocomplete/Autocomplete").Props): JSX.Element;
         displayName: string;
     };
-    Input: import("react").ForwardRefExoticComponent<Pick<import("../Input").Props, keyof import("react-final-form").FieldProps<string | undefined, import("react-final-form").FieldRenderProps<string | undefined, HTMLInputElement>, HTMLInputElement>> & import("react").RefAttributes<HTMLInputElement>>;
+    Input: import("react").ForwardRefExoticComponent<Pick<import("../Input").Props, keyof import("react-final-form").FieldProps<string | undefined, import("react-final-form").FieldRenderProps<string | undefined, HTMLInputElement, string | undefined>, HTMLInputElement, string | undefined>> & import("react").RefAttributes<HTMLInputElement>>;
     Select: {
         <T_1 extends import("@toptal/picasso").SelectValueType, M extends boolean = false>(props: import("../Select/Select").Props<T_1, M>): JSX.Element;
         defaultProps: {};
@@ -95,7 +95,7 @@ export declare const FormCompound: {
     };
     RichTextEditor: (props: import("../RichTextEditor/RichTextEditor").Props) => JSX.Element;
     AvatarUpload: {
-        (props: import("@toptal/picasso").AvatarUploadProps & import("react-final-form").FieldProps<import("@toptal/picasso").AvatarUploadFileUpload | undefined, import("react-final-form").FieldRenderProps<import("@toptal/picasso").AvatarUploadFileUpload | undefined, HTMLInputElement>, HTMLInputElement> & import("@toptal/picasso-shared/src").TextLabelProps): JSX.Element;
+        (props: import("@toptal/picasso").AvatarUploadProps & import("react-final-form").FieldProps<import("@toptal/picasso").AvatarUploadFileUpload | undefined, import("react-final-form").FieldRenderProps<import("@toptal/picasso").AvatarUploadFileUpload | undefined, HTMLInputElement, import("@toptal/picasso").AvatarUploadFileUpload | undefined>, HTMLInputElement, import("@toptal/picasso").AvatarUploadFileUpload | undefined> & import("@toptal/picasso-shared/src").TextLabelProps): JSX.Element;
         defaultProps: {};
         displayName: string;
     };

package/Input/Input.d.ts

@@ -6,5 +6,5 @@ export declare type FormInputProps = Omit<InputProps, 'onResetClick'> & {
     onResetClick?: (set: (value: string) => void) => void;
 };
 export declare type Props = FormInputProps & FieldProps<InputProps['value']>;
-export declare const Input: React.ForwardRefExoticComponent<Pick<Props, keyof import("react-final-form").FieldProps<string | undefined, import("react-final-form").FieldRenderProps<string | undefined, HTMLInputElement>, HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Pick<Props, keyof import("react-final-form").FieldProps<string | undefined, import("react-final-form").FieldRenderProps<string | undefined, HTMLInputElement, string | undefined>, HTMLInputElement, string | undefined>> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/index.d.ts

@@ -10,3 +10,6 @@ export { FormCompound as Form } from './FormCompound';
 export { default as FieldWrapper } from './FieldWrapper';
 export type { FieldProps } from './Field';
 export type { FormConfigProps, RequiredVariant } from './FormConfig';
+export { default as createFormValuesChangeDecorator } from './utils/form-values-change-decorator';
+export type { ChangedFields } from './utils/form-values-change-decorator';
+export { default as useFormAutoSave } from './utils/use-form-auto-save/use-form-auto-save';

package/index.js

@@ -6,5 +6,7 @@ export { OnChange, OnFocus, ExternallyChanged, OnBlur, } from 'react-final-form-
 // Picasso Forms exports
 export { FormCompound as Form } from './FormCompound';
 export { default as FieldWrapper } from './FieldWrapper';
+export { default as createFormValuesChangeDecorator } from './utils/form-values-change-decorator';
+export { default as useFormAutoSave } from './utils/use-form-auto-save/use-form-auto-save';
 // hygen code generator inserts export statements above this comment.
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EACL,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,IAAI,IAAI,SAAS,EACjB,KAAK,IAAI,UAAU,GACpB,MAAM,kBAAkB,CAAA;AASzB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAKnE,OAAO,EACL,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,MAAM,GACP,MAAM,4BAA4B,CAAA;AAEnC,wBAAwB;AACxB,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGxD,qEAAqE"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EACL,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,IAAI,IAAI,SAAS,EACjB,KAAK,IAAI,UAAU,GACpB,MAAM,kBAAkB,CAAA;AASzB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAKnE,OAAO,EACL,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,MAAM,GACP,MAAM,4BAA4B,CAAA;AAEnC,wBAAwB;AACxB,OAAO,EAAE,YAAY,IAAI,IAAI,EAAE,MAAM,gBAAgB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGxD,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,sCAAsC,CAAA;AAEjG,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,+CAA+C,CAAA;AAC1F,qEAAqE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-forms",
-  "version": "49.0.1",
+  "version": "49.2.0",
   "description": "Picasso form components",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
@@ -31,11 +31,12 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
+    "debounce": "^1.2.1",
     "detect-browser": "^5.3.0",
     "final-form": "^4.20.2",
     "final-form-arrays": "^3.0.2",
-    "react-final-form": "^6.5.1",
-    "react-final-form-arrays": "^3.1.3",
+    "react-final-form": "^6.5.9",
+    "react-final-form-arrays": "^3.1.4",
     "react-final-form-listeners": "^1.0.3"
   },
   "devDependencies": {

package/utils/form-values-change-decorator/form-values-change-decorator.d.ts

@@ -0,0 +1,9 @@
+import { AnyObject, FormApi } from 'final-form';
+export declare type ChangedFields<T extends AnyObject> = Partial<Record<keyof T, boolean>>;
+export declare const getChangedFields: <T extends AnyObject>(newValues: T, existingValues?: T | undefined, subscribedFields?: (keyof T)[] | undefined) => Partial<Record<keyof T, boolean>>;
+interface Props<T extends AnyObject> {
+    onChange: (changedFields: ChangedFields<T>, values: T) => void;
+    subscribedFields?: (keyof T)[];
+}
+declare const createFormValuesChangeDecorator: <T extends AnyObject>({ onChange, subscribedFields, }: Props<T>) => (form: FormApi<T, Partial<T>>) => () => void;
+export default createFormValuesChangeDecorator;

package/utils/form-values-change-decorator/form-values-change-decorator.js

@@ -0,0 +1,30 @@
+export const getChangedFields = (newValues, existingValues, subscribedFields) => {
+    if (!existingValues) {
+        return {};
+    }
+    const keysArray = subscribedFields !== null && subscribedFields !== void 0 ? subscribedFields : Object.keys(newValues);
+    const result = keysArray.reduce((changedFields, field) => {
+        if (newValues[field] !== existingValues[field]) {
+            changedFields[field] = true;
+        }
+        return changedFields;
+    }, {});
+    return result;
+};
+let oldValues = {};
+const createFormValuesChangeDecorator = ({ onChange, subscribedFields, }) => {
+    return (form) => {
+        const unsubscribe = form.subscribe(nextState => {
+            const changedFields = getChangedFields(nextState.values, oldValues, subscribedFields);
+            if (Object.keys(changedFields).length > 0) {
+                onChange(changedFields, nextState.values);
+                oldValues = nextState.values;
+            }
+        }, { values: true });
+        return () => {
+            unsubscribe();
+        };
+    };
+};
+export default createFormValuesChangeDecorator;
+//# sourceMappingURL=form-values-change-decorator.js.map

package/utils/form-values-change-decorator/form-values-change-decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-values-change-decorator.js","sourceRoot":"","sources":["../../../src/utils/form-values-change-decorator/form-values-change-decorator.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,SAAY,EACZ,cAAkB,EAClB,gBAA8B,EACZ,EAAE;IACpB,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAA;KACV;IAED,MAAM,SAAS,GAAG,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAiB,CAAA;IAE7E,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAmB,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE;QACzE,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK,cAAc,CAAC,KAAK,CAAC,EAAE;YAC9C,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAA;SAC5B;QAED,OAAO,aAAa,CAAA;IACtB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAOD,IAAI,SAAS,GAAc,EAAE,CAAA;AAE7B,MAAM,+BAA+B,GAAG,CAAsB,EAC5D,QAAQ,EACR,gBAAgB,GACP,EAAE,EAAE;IACb,OAAO,CAAC,IAAgB,EAAE,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAChC,SAAS,CAAC,EAAE;YACV,MAAM,aAAa,GAAG,gBAAgB,CACpC,SAAS,CAAC,MAAM,EAChB,SAAc,EACd,gBAAgB,CACjB,CAAA;YAED,IAAI,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzC,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;gBAEzC,SAAS,GAAG,SAAS,CAAC,MAAM,CAAA;aAC7B;QACH,CAAC,EACD,EAAE,MAAM,EAAE,IAAI,EAAE,CACjB,CAAA;QAED,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,CAAA;QACf,CAAC,CAAA;IACH,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,+BAA+B,CAAA"}

package/utils/form-values-change-decorator/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './form-values-change-decorator';
+export type { ChangedFields } from './form-values-change-decorator';

package/utils/form-values-change-decorator/index.js

@@ -0,0 +1,2 @@
+export { default } from './form-values-change-decorator';
+//# sourceMappingURL=index.js.map

package/utils/form-values-change-decorator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/form-values-change-decorator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA"}

package/utils/index.d.ts

@@ -1,4 +1,6 @@
 export { default as validators } from './validators';
 export { default as createScrollToErrorDecorator } from './scroll-to-error-decorator';
+export { default as createFormValuesChangeDecorator } from './form-values-change-decorator';
+export { default as useFormAutoSave } from './use-form-auto-save';
 export { default as flatMap } from './flat-map';
 export { default as useFieldValidation } from './use-field-validation';

package/utils/index.js

@@ -1,5 +1,7 @@
 export { default as validators } from './validators';
 export { default as createScrollToErrorDecorator } from './scroll-to-error-decorator';
+export { default as createFormValuesChangeDecorator } from './form-values-change-decorator';
+export { default as useFormAutoSave } from './use-form-auto-save';
 export { default as flatMap } from './flat-map';
 export { default as useFieldValidation } from './use-field-validation';
 //# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,6BAA6B,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,6BAA6B,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,gCAAgC,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAA"}

package/utils/use-form-auto-save/index.d.ts

@@ -0,0 +1 @@
+export { default } from './use-form-auto-save';

package/utils/use-form-auto-save/index.js

@@ -0,0 +1,2 @@
+export { default } from './use-form-auto-save';
+//# sourceMappingURL=index.js.map

package/utils/use-form-auto-save/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/use-form-auto-save/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}

package/utils/use-form-auto-save/use-form-auto-save.d.ts

@@ -0,0 +1,12 @@
+import { AnyObject } from 'final-form';
+import { ChangedFields } from '../form-values-change-decorator';
+interface Props<T extends AnyObject> {
+    subscribedFields?: (keyof T)[];
+    onFormValuesChange: (changedFields: ChangedFields<T>, values: T) => void;
+    debounceDelay?: number;
+}
+declare const useFormAutoSave: <T extends AnyObject>(props: Props<T>) => {
+    savingFields: Partial<Record<keyof T, boolean>> | undefined;
+    autoSaveDecorator: (form: import("final-form").FormApi<T, Partial<T>>) => () => void;
+};
+export default useFormAutoSave;

package/utils/use-form-auto-save/use-form-auto-save.js

@@ -0,0 +1,35 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback, useMemo, useState } from 'react';
+import { debounce } from 'debounce';
+import createFormValuesChangeDecorator from '../form-values-change-decorator';
+const useFormAutoSave = (props) => {
+    const [savingFields, setSavingFields] = useState();
+    const { onFormValuesChange, subscribedFields, debounceDelay: delay = 1000, } = props;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleValueChange = useCallback(debounce((changedValues, debouncedValues) => __awaiter(void 0, void 0, void 0, function* () {
+        yield onFormValuesChange(changedValues, debouncedValues);
+        setSavingFields(undefined);
+    }), delay), [delay, onFormValuesChange]);
+    const handleFormValuesChange = useCallback((changedFields, values) => {
+        setSavingFields(changedFields);
+        handleValueChange(changedFields, values);
+    }, [handleValueChange]);
+    const autoSaveDecorator = useMemo(() => createFormValuesChangeDecorator({
+        subscribedFields,
+        onChange: handleFormValuesChange,
+    }), [handleFormValuesChange, subscribedFields]);
+    return {
+        savingFields,
+        autoSaveDecorator,
+    };
+};
+export default useFormAutoSave;
+//# sourceMappingURL=use-form-auto-save.js.map

package/utils/use-form-auto-save/use-form-auto-save.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form-auto-save.js","sourceRoot":"","sources":["../../../src/utils/use-form-auto-save/use-form-auto-save.ts"],"names":[],"mappings":";;;;;;;;;AACA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,OAAO,+BAEN,MAAM,iCAAiC,CAAA;AAQxC,MAAM,eAAe,GAAG,CAAsB,KAAe,EAAE,EAAE;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAE7C,CAAA;IAEH,MAAM,EACJ,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EAAE,KAAK,GAAG,IAAI,GAC5B,GAAG,KAAK,CAAA;IAET,uDAAuD;IACvD,MAAM,iBAAiB,GAAG,WAAW,CACnC,QAAQ,CAAC,CAAO,aAA+B,EAAE,eAAkB,EAAE,EAAE;QACrE,MAAM,kBAAkB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAA;QAExD,eAAe,CAAC,SAAS,CAAC,CAAA;IAC5B,CAAC,CAAA,EAAE,KAAK,CAAC,EACT,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAC5B,CAAA;IAED,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,aAA+B,EAAE,MAAS,EAAE,EAAE;QAC7C,eAAe,CAAC,aAAa,CAAC,CAAA;QAE9B,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IAC1C,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAA;IAED,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CACH,+BAA+B,CAAC;QAC9B,gBAAgB;QAChB,QAAQ,EAAE,sBAAsB;KACjC,CAAC,EACJ,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAC3C,CAAA;IAED,OAAO;QACL,YAAY;QACZ,iBAAiB;KAClB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}