@toptal/picasso-forms 49.0.1 → 49.1.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,4 @@ 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';

package/index.js

@@ -6,5 +6,6 @@ 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';
 // 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;AACjG,qEAAqE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-forms",
-  "version": "49.0.1",
+  "version": "49.1.0",
   "description": "Picasso form components",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
@@ -34,8 +34,8 @@
     "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';
+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":"AAIA,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 @@
+export { default } 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,5 @@
 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 flatMap } from './flat-map';
 export { default as useFieldValidation } from './use-field-validation';

package/utils/index.js

@@ -1,5 +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 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,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAA"}