elseware-ui 2.19.0 → 2.19.1

package/build/components/data-entry/form/Form.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 export interface FormProps {
-    initialValues?: object;
+    initialValues?: Record<string, any>;
     validationSchema?: object;
     enableReinitialize?: boolean;
     children?: React.ReactNode;
     styles?: string;
-    onSubmit: any;
+    onSubmit: (values: any) => void;
+    onChange?: (values: Record<string, any>, meta?: {
+        changed: Record<string, any>;
+    }) => void;
 }
-export declare const Form: ({ initialValues, validationSchema, enableReinitialize, children, styles, onSubmit, }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: ({ initialValues, validationSchema, enableReinitialize, children, styles, onSubmit, onChange, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/data-entry/form/FormObserver.d.ts

@@ -0,0 +1,9 @@
+import { FormikProps } from "formik";
+interface FormObserverProps {
+    formik: FormikProps<Record<string, any>>;
+    onChange?: (values: Record<string, any>, meta?: {
+        changed: Record<string, any>;
+    }) => void;
+}
+declare const FormObserver: ({ formik, onChange }: FormObserverProps) => null;
+export default FormObserver;

package/build/index.es.js

@@ -36283,14 +36283,31 @@ var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
 
 var ErrorMessage = /*#__PURE__*/connect$1(ErrorMessageImpl);
 
+var FormObserver = function (_a) {
+    var formik = _a.formik, onChange = _a.onChange;
+    var prevValuesRef = useRef(formik.values);
+    useEffect(function () {
+        if (!onChange)
+            return;
+        var currentValues = formik.values;
+        var prevValues = prevValuesRef.current;
+        var changed = {};
+        Object.keys(currentValues).forEach(function (key) {
+            if (currentValues[key] !== prevValues[key]) {
+                changed[key] = currentValues[key];
+            }
+        });
+        if (Object.keys(changed).length > 0) {
+            onChange(currentValues, { changed: changed });
+        }
+        prevValuesRef.current = currentValues;
+    }, [formik.values, onChange]);
+    return null;
+};
+
 var Form = function (_a) {
-    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit;
-    return (jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) {
-            var _a;
-            return (jsx(Form$1, { children: jsx("div", __assign$1({ className: classnames((_a = {},
-                        _a["".concat(styles)] = styles,
-                        _a)) }, { children: children })) }));
-        } })));
+    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange;
+    return (jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxs(Form$1, { children: [jsx(FormObserver, { formik: formik, onChange: onChange }), jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
 };
 
 var Backdrop = function (_a) {

package/build/index.js

@@ -36310,14 +36310,31 @@ var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
 
 var ErrorMessage = /*#__PURE__*/connect$1(ErrorMessageImpl);
 
+var FormObserver = function (_a) {
+    var formik = _a.formik, onChange = _a.onChange;
+    var prevValuesRef = React.useRef(formik.values);
+    React.useEffect(function () {
+        if (!onChange)
+            return;
+        var currentValues = formik.values;
+        var prevValues = prevValuesRef.current;
+        var changed = {};
+        Object.keys(currentValues).forEach(function (key) {
+            if (currentValues[key] !== prevValues[key]) {
+                changed[key] = currentValues[key];
+            }
+        });
+        if (Object.keys(changed).length > 0) {
+            onChange(currentValues, { changed: changed });
+        }
+        prevValuesRef.current = currentValues;
+    }, [formik.values, onChange]);
+    return null;
+};
+
 var Form = function (_a) {
-    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit;
-    return (jsxRuntime.jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) {
-            var _a;
-            return (jsxRuntime.jsx(Form$1, { children: jsxRuntime.jsx("div", __assign$1({ className: classnames((_a = {},
-                        _a["".concat(styles)] = styles,
-                        _a)) }, { children: children })) }));
-        } })));
+    var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange;
+    return (jsxRuntime.jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxRuntime.jsxs(Form$1, { children: [jsxRuntime.jsx(FormObserver, { formik: formik, onChange: onChange }), jsxRuntime.jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
 };
 
 var Backdrop = function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.19.0",
+  "version": "2.19.1",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [