intelicoreact 2.0.18 → 2.0.20

package/dist/es/Functions/useFormTools/functions/General.js

@@ -0,0 +1,87 @@
+//#region src/Functions/useFormTools/functions/General.js
+function General({ form, FormFields = [] } = {}) {
+	const joinData = (...args) => {
+		const [mainArg] = args;
+		const MainArgProto = Array.isArray(mainArg) ? "Array" : typeof mainArg === "object" ? "Object" : void 0;
+		const template = Array.isArray(mainArg) ? [] : typeof mainArg === "object" ? {} : null;
+		if (!template) return void 0;
+		return args.reduce((result, item) => {
+			if (MainArgProto === "Array") if (Array.isArray(item)) return [...result, ...item];
+			else return [...result, item];
+			else if (MainArgProto === "Object") return {
+				...result,
+				...item
+			};
+			else return template;
+		}, template);
+	};
+	const getFieldData = (key) => {
+		if (Array.isArray(FormFields)) if (FormFields[key]) return { ...FormFields[key] };
+		else return { ...FormFields.find((f) => f.key === key) };
+		else if (typeof FormFields === "object") return { ...FormFields[key] };
+		else return;
+	};
+	const getFormFields = (argForm = form) => {
+		return argForm?.fields || argForm;
+	};
+	const getFormFieldsAsArray = (fields) => {
+		if (Array.isArray(fields)) return fields;
+		if (typeof fields === "object") return Object.values(fields);
+		return fields;
+	};
+	const getFormFieldsKeys = (fields = getFormFields()) => {
+		if (Array.isArray(fields)) return fields.map(({ key }) => key);
+		if (typeof fields === "object") return Object.values(fields).map(({ key }) => key);
+		return fields;
+	};
+	const popFormField = (fields, key) => {
+		const result = {
+			item: void 0,
+			itemIndex: void 0
+		};
+		if (Array.isArray(fields)) {
+			result.item = fields?.find((f) => f.key === key);
+			result.itemIndex = result.item ? fields.findIndex((f) => f.key === key) : fields.length;
+		} else if (typeof fields === "object") {
+			result.item = fields[key] || Object.values(fields).find((f) => f.key === key);
+			result.itemIndex = result.item ? fields[key] ? key : Object.values(fields).findIndex((f) => f.key === key) : key;
+		}
+		return result;
+	};
+	const updateFormField = (fields, data, key) => {
+		const isFunction = typeof data === "function";
+		if (!key) return data.key ? Object.values(fields).reduce((result, field2, i) => {
+			const index = fields[field2.key] ? field2.key : i;
+			return {
+				...result,
+				[index]: data.key === field2.key ? isFunction ? data(field2) : data : field2
+			};
+		}, {}) : {
+			...fields,
+			[fields.length || 0]: isFunction ? data({}) : data
+		};
+		const { item: field = data, itemIndex } = popFormField(fields, key);
+		fields[itemIndex] = isFunction ? data(field || {}) : {
+			...field,
+			...data
+		};
+		return fields;
+	};
+	const getFieldClassName = (key, type) => {
+		return `form-${type}_field-${key}`;
+	};
+	return {
+		joinData,
+		getFieldData,
+		popFormField,
+		updateFormField,
+		getFormFields,
+		getFormFieldsAsArray,
+		getFieldClassName,
+		getFormFieldsKeys
+	};
+}
+//#endregion
+export { General as default };
+
+//# sourceMappingURL=General.js.map

package/dist/es/Functions/useFormTools/functions/General.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"General.js","names":["field"],"sources":["../../../../../src/Functions/useFormTools/functions/General.js"],"sourcesContent":["export default function General({ form, FormFields = [] } = {}) {\n  const joinData = (...args) => {\n    const [mainArg] = args;\n    const MainArgProto = Array.isArray(mainArg)\n      ? \"Array\"\n      : typeof mainArg === \"object\"\n        ? \"Object\"\n        : undefined;\n    const template = Array.isArray(mainArg)\n      ? []\n      : typeof mainArg === \"object\"\n        ? {}\n        : null;\n\n    if (!template) return undefined;\n\n    return args.reduce((result, item) => {\n      if (MainArgProto === \"Array\") {\n        if (Array.isArray(item)) {\n          return [...result, ...item];\n        } else {\n          return [...result, item];\n        }\n      } else if (MainArgProto === \"Object\") {\n        return { ...result, ...item };\n      } else {\n        return template;\n      }\n    }, template);\n  };\n  const getFieldData = (key) => {\n    if (Array.isArray(FormFields)) {\n      if (FormFields[key]) {\n        return { ...FormFields[key] };\n      } else {\n        return { ...FormFields.find((f) => f.key === key) };\n      }\n    } else if (typeof FormFields === \"object\") {\n      return (\n        { ...FormFields[key] } || {\n          ...Object.values(FormFields).find((f) => f.key === key),\n        }\n      );\n    } else {\n      return undefined;\n    }\n  };\n  const getFormFields = (argForm = form) => {\n    return argForm?.fields || argForm;\n  };\n  const getFormFieldsAsArray = (fields) => {\n    if (Array.isArray(fields)) return fields;\n\n    if (typeof fields === \"object\") {\n      return Object.values(fields);\n    }\n\n    return fields;\n  };\n  const getFormFieldsKeys = (fields = getFormFields()) => {\n    if (Array.isArray(fields)) return fields.map(({ key }) => key);\n\n    if (typeof fields === \"object\") {\n      return Object.values(fields).map(({ key }) => key);\n    }\n\n    return fields;\n  };\n  const popFormField = (fields, key) => {\n    const result = { item: undefined, itemIndex: undefined };\n\n    if (Array.isArray(fields)) {\n      result.item = fields?.find((f) => f.key === key);\n      result.itemIndex = result.item\n        ? fields.findIndex((f) => f.key === key)\n        : fields.length;\n    } else if (typeof fields === \"object\") {\n      result.item =\n        fields[key] || Object.values(fields).find((f) => f.key === key);\n      result.itemIndex = result.item\n        ? fields[key]\n          ? key\n          : Object.values(fields).findIndex((f) => f.key === key)\n        : key;\n    }\n\n    return result;\n  };\n  const updateFormField = (fields, data, key) => {\n    const isFunction = typeof data === \"function\";\n    //KEY is NULLable\n    if (!key) {\n      return data.key\n        ? Object.values(fields).reduce((result, field, i) => {\n            const index = fields[field.key] ? field.key : i;\n\n            return {\n              ...result,\n              [index]:\n                data.key === field.key\n                  ? isFunction\n                    ? data(field)\n                    : data\n                  : field,\n            };\n          }, {})\n        : {\n            ...fields,\n            [fields.length || 0]: isFunction ? data({}) : data,\n          };\n    }\n\n    const { item: field = data, itemIndex } = popFormField(fields, key);\n\n    fields[itemIndex] = isFunction ? data(field || {}) : { ...field, ...data };\n\n    return fields;\n  };\n\n  const getFieldClassName = (key, type) => {\n    return `form-${type}_field-${key}`;\n  };\n\n  return {\n    joinData,\n    getFieldData,\n    popFormField,\n    updateFormField,\n    getFormFields,\n    getFormFieldsAsArray,\n    getFieldClassName,\n    getFormFieldsKeys,\n  };\n}\n"],"mappings":"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"}

package/dist/es/Functions/useFormTools/functions/RenderFields.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/Functions/useFormTools/functions/RenderFields.js
+var defaultRenderFieldComponent = () => {
+	console.error("RenderFields: RenderFieldComponent Property is not recieved!");
+	return null;
+};
+var defaultFormDataDriver = () => {
+	console.error("RenderFields: FormDataDriver Property is not recieved!");
+	return null;
+};
+var defaultOnFieldChange = () => {
+	console.warn("RenderFields: Be careful, onFieldChange handler is not recieved!");
+	return null;
+};
+var defaultOnFieldBlur = () => {
+	console.warn("RenderFields: Be careful, defaultOnFieldBlur handler is not recieved!");
+	return null;
+};
+function RenderFields({ form, fields, cols = 1, FormDataDriver = defaultFormDataDriver, RenderFieldComponent = defaultRenderFieldComponent, onFieldChange = defaultOnFieldChange, onFieldBlur = defaultOnFieldBlur } = {}) {
+	const maxColumns = 6;
+	const maxWidth = 12;
+	const { getFormField } = FormDataDriver({ form });
+	const getColumnsQty = () => {
+		return cols > maxColumns ? maxColumns : cols;
+	};
+	const renderFormField = (key) => {
+		try {
+			const field = {
+				...getFormField(key),
+				key
+			};
+			const { wrapperRef } = field;
+			return /* @__PURE__ */ jsx("div", {
+				id: `render-field-wrapper-${key}`,
+				ref: wrapperRef ? typeof wrapperRef === "function" ? (node) => wrapperRef(node, key) : wrapperRef : null,
+				children: /* @__PURE__ */ jsx(RenderFieldComponent, {
+					field,
+					onChange: (value) => onFieldChange(key, value),
+					onBlur: (...args) => onFieldBlur(...args)
+				}, key)
+			}, `render-field-wrapper-${key}`);
+		} catch (e) {
+			return null;
+		}
+	};
+	const renderSingleColumn = () => {
+		return fields.map(renderFormField);
+	};
+	const renderSplitColumns = () => {
+		const fieldsLen = fields?.length || 0;
+		const columnsQty = getColumnsQty() > fieldsLen ? fieldsLen : getColumnsQty();
+		if (!columnsQty) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "row",
+			children: new Array(columnsQty).fill([]).map((v, i) => {
+				const startIndex = fieldsLen / columnsQty * i;
+				const endIndex = startIndex + fieldsLen / columnsQty;
+				return fields.slice(startIndex, endIndex);
+			}).map((part, i) => /* @__PURE__ */ jsx("div", {
+				className: `col-12 col-lg-${parseInt(maxWidth / columnsQty, 10)}`,
+				children: part.map(renderFormField)
+			}, `render-fields-row-${i}`))
+		});
+	};
+	return (cols === 1 ? renderSingleColumn : renderSplitColumns)();
+}
+//#endregion
+export { RenderFields as default };
+
+//# sourceMappingURL=RenderFields.js.map

package/dist/es/Functions/useFormTools/functions/RenderFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderFields.js","names":[],"sources":["../../../../../src/Functions/useFormTools/functions/RenderFields.js"],"sourcesContent":["const defaultRenderFieldComponent = () => {\n  // eslint-disable-next-line no-console\n  console.error(\"RenderFields: RenderFieldComponent Property is not recieved!\");\n  return null;\n};\n\nconst defaultFormDataDriver = () => {\n  // eslint-disable-next-line no-console\n  console.error(\"RenderFields: FormDataDriver Property is not recieved!\");\n  return null;\n};\n\nconst defaultOnFieldChange = () => {\n  // eslint-disable-next-line no-console\n  console.warn(\n    \"RenderFields: Be careful, onFieldChange handler is not recieved!\",\n  );\n  return null;\n};\n\nconst defaultOnFieldBlur = () => {\n  // eslint-disable-next-line no-console\n  console.warn(\n    \"RenderFields: Be careful, defaultOnFieldBlur handler is not recieved!\",\n  );\n  return null;\n};\n\nexport default function RenderFields({\n  form,\n  fields,\n  cols = 1,\n  FormDataDriver = defaultFormDataDriver,\n  RenderFieldComponent = defaultRenderFieldComponent,\n  onFieldChange = defaultOnFieldChange,\n  onFieldBlur = defaultOnFieldBlur,\n} = {}) {\n  const maxColumns = 6;\n  const maxWidth = 12;\n\n  const { getFormField } = FormDataDriver({ form });\n\n  const getColumnsQty = () => {\n    return cols > maxColumns ? maxColumns : cols;\n  };\n\n  const renderFormField = (key) => {\n    try {\n      const field = { ...getFormField(key), key };\n      const { wrapperRef } = field;\n\n      return (\n        <div\n          key={`render-field-wrapper-${key}`}\n          id={`render-field-wrapper-${key}`}\n          ref={\n            wrapperRef\n              ? typeof wrapperRef === \"function\"\n                ? (node) => wrapperRef(node, key)\n                : wrapperRef\n              : null\n          }\n        >\n          <RenderFieldComponent\n            key={key}\n            field={field}\n            onChange={(value) => onFieldChange(key, value)}\n            onBlur={(...args) => onFieldBlur(...args)}\n          />\n        </div>\n      );\n    } catch (e) {\n      return null;\n    }\n  };\n\n  const renderSingleColumn = () => {\n    return fields.map(renderFormField);\n  };\n  const renderSplitColumns = () => {\n    const fieldsLen = fields?.length || 0;\n    const columnsQty =\n      getColumnsQty() > fieldsLen ? fieldsLen : getColumnsQty();\n\n    if (!columnsQty) return null;\n\n    const parts = new Array(columnsQty).fill([]).map((v, i) => {\n      const startIndex = (fieldsLen / columnsQty) * i;\n      const endIndex = startIndex + fieldsLen / columnsQty;\n\n      return fields.slice(startIndex, endIndex);\n    });\n\n    return (\n      <div className=\"row\">\n        {parts.map((part, i) => (\n          <div\n            key={`render-fields-row-${i}`}\n            className={`col-12 col-lg-${parseInt(maxWidth / columnsQty, 10)}`}\n          >\n            {part.map(renderFormField)}\n          </div>\n        ))}\n      </div>\n    );\n  };\n\n  const render = cols === 1 ? renderSingleColumn : renderSplitColumns;\n\n  return render();\n}\n"],"mappings":";;AAAA,IAAM,oCAAoC;CAExC,QAAQ,MAAM,8DAA8D;CAC5E,OAAO;AACT;AAEA,IAAM,8BAA8B;CAElC,QAAQ,MAAM,wDAAwD;CACtE,OAAO;AACT;AAEA,IAAM,6BAA6B;CAEjC,QAAQ,KACN,kEACF;CACA,OAAO;AACT;AAEA,IAAM,2BAA2B;CAE/B,QAAQ,KACN,uEACF;CACA,OAAO;AACT;AAEA,SAAwB,aAAa,EACnC,MACA,QACA,OAAO,GACP,iBAAiB,uBACjB,uBAAuB,6BACvB,gBAAgB,sBAChB,cAAc,uBACZ,CAAC,GAAG;CACN,MAAM,aAAa;CACnB,MAAM,WAAW;CAEjB,MAAM,EAAE,iBAAiB,eAAe,EAAE,KAAK,CAAC;CAEhD,MAAM,sBAAsB;EAC1B,OAAO,OAAO,aAAa,aAAa;CAC1C;CAEA,MAAM,mBAAmB,QAAQ;EAC/B,IAAI;GACF,MAAM,QAAQ;IAAE,GAAG,aAAa,GAAG;IAAG;GAAI;GAC1C,MAAM,EAAE,eAAe;GAEvB,OACE,oBAAC,OAAA;IAEC,IAAI,wBAAwB;IAC5B,KACE,aACI,OAAO,eAAe,cACnB,SAAS,WAAW,MAAM,GAAG,IAC9B,aACF;IAGN,UAAA,oBAAC,sBAAA;KAEC;KACA,WAAW,UAAU,cAAc,KAAK,KAAK;KAC7C,SAAQ,GAAI,SAAS,YAAY,GAAG,IAAI;IAAA,GAHnC,GAIP;GAAA,GAfK,wBAAwB,KAgB/B;EAEJ,SAAS,GAAG;GACV,OAAO;EACT;CACF;CAEA,MAAM,2BAA2B;EAC/B,OAAO,OAAO,IAAI,eAAe;CACnC;CACA,MAAM,2BAA2B;EAC/B,MAAM,YAAY,QAAQ,UAAU;EACpC,MAAM,aACJ,cAAc,IAAI,YAAY,YAAY,cAAc;EAE1D,IAAI,CAAC,YAAY,OAAO;EASxB,OACE,oBAAC,OAAA;GAAI,WAAU;GACZ,UATS,IAAI,MAAM,UAAU,CAAA,CAAE,KAAK,CAAC,CAAC,CAAA,CAAE,KAAK,GAAG,MAAM;IACzD,MAAM,aAAc,YAAY,aAAc;IAC9C,MAAM,WAAW,aAAa,YAAY;IAE1C,OAAO,OAAO,MAAM,YAAY,QAAQ;GAC1C,CAIK,CAAA,CAAM,KAAK,MAAM,MAChB,oBAAC,OAAA;IAEC,WAAW,iBAAiB,SAAS,WAAW,YAAY,EAAE;IAE7D,UAAA,KAAK,IAAI,eAAe;GAAA,GAHpB,qBAAqB,GAI5B,CACD;EAAA,CACH;CAEJ;CAIA,QAFe,SAAS,IAAI,qBAAqB,mBAAA,CAEnC;AAChB"}

package/dist/es/Functions/useFormTools/index.js

@@ -0,0 +1,464 @@
+import General from "./functions/General.js";
+import ArrayWithObjects from "./form-drivers/ArrayWithObjects.js";
+import ObjectWithIterableObjects from "./form-drivers/ObjectWithIterableObjects.js";
+import ObjectWithNamedKeyObjects from "./form-drivers/ObjectWithNamedKeyObjects.js";
+import RenderFields from "./functions/RenderFields.js";
+import { createRef, useEffect, useState } from "react";
+//#region src/Functions/useFormTools/index.js
+var DefaultFocusControllerProps = {
+	setAutoFocus: true,
+	onlyEmptyFieldAutoFocus: false
+};
+function useFormTools({ form, setForm, FormType, FormFields, FormDataDriverName = "ArrayWithObjects", FormDataDriver = null, FocusControllerProps = DefaultFocusControllerProps, goToNextFieldOnEnterPressed = true } = {}) {
+	FocusControllerProps = {
+		...DefaultFocusControllerProps,
+		...FocusControllerProps
+	};
+	const FormDataDrivers = {
+		ArrayWithObjects: {
+			handlers: ArrayWithObjects,
+			default: true
+		},
+		ObjectWithIterableObjects: { handlers: ObjectWithIterableObjects },
+		ObjectWithNamedKeyObjects: { handlers: ObjectWithNamedKeyObjects }
+	};
+	const getFormDataDriver = (name) => {
+		return FormDataDriver || FormDataDrivers[name]?.handlers || Object.values(FormDataDrivers).find((df) => df.default === true)?.handlers || (() => ({}));
+	};
+	const getFormDataDriverInstance = (name, ...args) => {
+		return getFormDataDriver(name)(...args);
+	};
+	const { getFieldClassName, updateFormField } = General();
+	const { getFieldData, getFormField, setFormFields, setFormField, getFormFieldsAsArray, getFormFieldsKeys, removeAllFormFields, removeFormField, removeFormFields } = getFormDataDriverInstance(FormDataDriverName, {
+		form,
+		setForm,
+		FormFields
+	});
+	const [onChangeObservers, setOnChangeObservers] = useState({});
+	const addOnChangeObserver = (key, cb) => {
+		let observerId = null;
+		setOnChangeObservers((state) => {
+			if (!state[key]) state[key] = {};
+			observerId = state[key].length;
+			state[key][observerId] = cb;
+			return state;
+		});
+		return observerId;
+	};
+	const removeOnChangeObserver = (key, id) => {
+		setOnChangeObservers((state) => {
+			if (!state[key]) return state;
+			state[key] = Object.keys(state).filter((cbId) => cbId !== id).map((cbId) => state[key][cbId]);
+			return state;
+		});
+	};
+	const onChangeObserver = (key, value) => {
+		if (!onChangeObservers[key] || typeof onChangeObservers[key] !== "object") return;
+		const Observers = onChangeObservers[key];
+		Object.values(Observers).map((cb) => {
+			cb({
+				value,
+				form
+			});
+			return null;
+		});
+	};
+	const onFieldChange = (key, value) => {
+		if (value === getFormField(key)?.value) return false;
+		onChangeObserver(key, value);
+		setFormField((field) => ({
+			...field,
+			error: "",
+			value
+		}), key);
+	};
+	const [formSubmitBlockers, setFormSubmitBlockers] = useState([]);
+	const toggleFormSubmitBlock = (key, value) => {
+		setFormSubmitBlockers((state) => state.includes(key) || !value ? [...state.filter((k) => k !== key)] : [...state, key]);
+	};
+	const clearFormSubmitBlockers = () => setFormSubmitBlockers([]);
+	const [isFormFieldsAdded, setIsFormFieldsAdded] = useState(false);
+	const [renderFormFields, setRenderFormFieldsState] = useState([]);
+	const setRenderFormFields = (data) => {
+		setIsFormFieldsAdded(true);
+		removeRenderFields(renderFormFields);
+		resetIsInitFocused();
+		setRenderFormFieldsState(data);
+	};
+	const addRenderFields = (fields) => {
+		setRenderFormFieldsState((state) => [...state, ...fields]);
+	};
+	const removeRenderFields = (fields) => {
+		setRenderFormFieldsState((state) => state.filter((field) => !fields.includes(field)));
+	};
+	const [isFormRendered, setIsFormRendered] = useState(false);
+	const submitIsFormRendered = () => setIsFormRendered(true);
+	const resetIsFormRendered = () => setIsFormRendered(false);
+	const onEnterDown = async (e) => {
+		if (!goToNextFieldOnEnterPressed) return false;
+		const focusable = document.querySelectorAll("a, button, input, [tabindex]:not([tabindex=\"-1\"])");
+		const currentIndex = await new Promise((resolve) => {
+			focusable.forEach((node, i) => {
+				if (node === e.target) resolve(i);
+			});
+		});
+		if (!currentIndex) return false;
+		const nextIndex = currentIndex + 1;
+		if (nextIndex >= focusable.length) return false;
+		focusable[nextIndex].focus();
+	};
+	const onKeyDown = (...args) => {
+		const event = args.reduce((e, item) => {
+			if (item?.nativeEvent instanceof KeyboardEvent) return item;
+			return e;
+		}, null);
+		if (!event) return false;
+		const { keyCode } = event;
+		switch (keyCode) {
+			case 13:
+				onEnterDown(event);
+				break;
+			default: break;
+		}
+	};
+	useEffect(() => {
+		resetIsFormRendered();
+	}, [FormType]);
+	useEffect(() => {
+		if (isFormFieldsAdded) resetIsFormRendered(false);
+		if (renderFormFields.length !== 0) setFormFields((fields) => {
+			return renderFormFields.reduce((result, key) => {
+				const fieldData = getFieldData(key);
+				const field = getFormField(key) ? getFormField(key) : fieldData;
+				if (!field?.className || field?.className?.indexOf(getFieldClassName(key, FormType)) === -1) field.className = `${field?.className} ${getFieldClassName(key, FormType)}`;
+				if (typeof fieldData?.label === "object") field.label = fieldData.label[FormType] || fieldData.label.default;
+				field.ref = createRef();
+				field.wrapperRef = createRef();
+				field.isValueChangedByUser = false;
+				if (goToNextFieldOnEnterPressed) {
+					const onKeyDownProp = field.onKeyDown || (() => {});
+					field.onKeyDown = (...args) => {
+						onKeyDown(...args);
+						onKeyDownProp(...args);
+					};
+				}
+				addOnFieldRenderedObserver(key, () => {
+					const element = getFormField(key)?.ref?.current?.querySelector(field?.focusSelector || "input");
+					const handler = () => setFormField({ isValueChangedByUser: true }, key);
+					element?.addEventListener("paste", handler, { once: true });
+					element?.addEventListener("keypress", handler, { once: true });
+				}, true);
+				return updateFormField(result, field, key);
+			}, fields);
+		});
+	}, [renderFormFields]);
+	const [onFormRenderObservers, setOnFormRenderObservers] = useState([]);
+	const addOnFormRenderObserver = (cb, { once = false } = {}) => {
+		setOnFormRenderObservers((state) => [...state, {
+			cb,
+			once,
+			isWorkedOut: false
+		}]);
+	};
+	const updateOnFormRenderObserver = (key, data) => {
+		setOnFormRenderObservers((state) => {
+			const copy = [...state];
+			copy[key] = {
+				...state[key],
+				...data
+			};
+			return copy;
+		});
+	};
+	const removeOnFormRenderObserver = (key) => {
+		setOnFormRenderObservers((state) => state.slice().filter((v, i) => i !== key));
+	};
+	const onFormRenderWorker = () => {
+		onFormRenderObservers.map(({ once, isWorkedOut, cb = () => {} } = {}, key) => {
+			if (once && isWorkedOut) return null;
+			cb(form);
+			if (once) removeOnFormRenderObserver(key);
+			else updateOnFormRenderObserver(key, { isWorkedOut: true });
+			return null;
+		});
+	};
+	useEffect(() => {
+		if (!isFormRendered && onFormRenderObservers.length) {
+			const formFieldsKeys = getFormFieldsKeys(form);
+			if (renderFormFields.reduce((result, key) => {
+				if (!formFieldsKeys.includes(key)) result = false;
+				return result;
+			}, true)) {
+				submitIsFormRendered(true);
+				onFormRenderWorker();
+			}
+		}
+	}, [
+		form,
+		renderFormFields,
+		onFormRenderObservers
+	]);
+	const hightliteErrorLabels = () => {
+		(getFormFieldsAsArray()?.reduce((result, field) => {
+			if (field?.errorLabelHightlite) result.push({
+				...field,
+				className: getFieldClassName(field?.key, FormType)
+			});
+			return result;
+		}, []))?.map((field) => {
+			const formField = document.querySelector(`.${field?.className}`);
+			if (!formField) return null;
+			formField.classList.remove("errorLabelHightlite");
+			if (field?.error) formField.classList.add("errorLabelHightlite");
+			return null;
+		});
+	};
+	useEffect(() => {
+		hightliteErrorLabels();
+	}, [form]);
+	const [isInitFocused, setIsInitFocused] = useState(false);
+	const [autoFocusedField, setAutoFocusedField] = useState(null);
+	const setFirstFieldInitFocused = () => setIsInitFocused(true);
+	const resetIsInitFocused = () => setIsInitFocused(false);
+	const toggleFieldFocus = ({ key, cb = () => {}, form: argForm, field }, action = "focus") => {
+		if (!key && !field) return null;
+		if (!argForm) argForm = form;
+		const formField = field || getFormField(key, argForm);
+		if (!formField || !formField.ref) return false;
+		if (action === "focus" && FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(formField?.value)) return null;
+		setTimeout(() => {
+			formField.ref.current?.querySelector(formField?.focusSelector || "input")?.[action]();
+			cb();
+		}, 50);
+	};
+	const setFieldFocus = ({ key, cb = () => {}, form: argForm, field }) => toggleFieldFocus({
+		key,
+		cb,
+		form: argForm,
+		field
+	}, "focus");
+	const setFieldBlur = ({ key, cb = () => {}, form: argForm, field }) => toggleFieldFocus({
+		key,
+		cb,
+		form: argForm,
+		field
+	}, "blur");
+	const setFirstFieldFocus = () => {
+		let field = null;
+		for (let i = 0; i < renderFormFields.length && !field; ++i) {
+			const key = renderFormFields[i];
+			const tmpField = getFormField(key);
+			if (tmpField && !tmpField?.disabled) field = tmpField;
+		}
+		if (!field) return false;
+		if (FocusControllerProps.onlyEmptyFieldAutoFocus && Boolean(field?.value)) {
+			setFirstFieldInitFocused();
+			return false;
+		}
+		setAutoFocusedField(field.key);
+		const callback = () => {
+			setFormField({ value: field.value }, field.key);
+			setFirstFieldInitFocused();
+		};
+		setTimeout(() => setFieldFocus({
+			key: field.key,
+			cb: callback,
+			form
+		}), 50);
+	};
+	const [onFieldFocusCallbacks, setOnFieldFocusCallbacks] = useState({});
+	const addOnFieldFocusCallback = (key, cb) => {
+		setOnFieldFocusCallbacks((state) => {
+			const stateCopy = { ...state };
+			if (!state[key]) stateCopy[key] = [];
+			stateCopy[key].push(cb);
+			return stateCopy;
+		});
+	};
+	const callOnFieldFocusCallbacks = (key) => {
+		if (!Array.isArray(onFieldFocusCallbacks[key])) return null;
+		onFieldFocusCallbacks[key]?.map((cb) => cb());
+	};
+	const [focusOnRenderFields, setFocusOnRenderFields] = useState([]);
+	const addFocusFieldOnRender = (key, cb) => {
+		setFocusOnRenderFields((state) => [...state, key]);
+		if (cb) addOnFieldFocusCallback(key, cb);
+	};
+	const removeFocusFieldOnRender = (key) => {
+		setFocusOnRenderFields((state) => state.filter((field) => field !== key));
+	};
+	useEffect(() => {
+		if (FocusControllerProps.setAutoFocus && !isInitFocused && !autoFocusedField && isFormRendered) setFirstFieldFocus();
+		if (focusOnRenderFields.length) getFormFieldsKeys(form)?.map((key) => {
+			if (focusOnRenderFields.includes(key) && getFormField(key)?.value?.length === 0) {
+				const cb = () => {
+					removeFocusFieldOnRender(key);
+					callOnFieldFocusCallbacks(key);
+				};
+				setFieldFocus({
+					key,
+					form,
+					cb
+				});
+			}
+			return null;
+		});
+	}, [
+		form,
+		focusOnRenderFields,
+		isInitFocused,
+		isFormRendered
+	]);
+	useEffect(() => {
+		setAutoFocusedField(null);
+	}, [isInitFocused]);
+	useEffect(() => {
+		resetIsInitFocused();
+	}, [FormType]);
+	const [onFieldRenderedObservers, setOnFieldRenderedObservers] = useState({});
+	const [isFieldObserversReset, setIsFieldObserversReset] = useState(false);
+	const resetOnFieldRenderObserversWorkedOut = () => {
+		if (!isFieldObserversReset && renderFormFields.length) {
+			renderFormFields.map((key) => {
+				setFormField({ isOnRenderObserversWorkedOut: false }, key);
+				return key;
+			});
+			setIsFieldObserversReset(true);
+		}
+	};
+	const addOnFieldRenderedObserver = (key, cb, isOnceCallable = true) => {
+		let observerId = null;
+		setOnFieldRenderedObservers((state) => {
+			if (!state[key]) state[key] = {};
+			observerId = Object.keys(state[key]).length || 0;
+			state[key][observerId] = {
+				f: cb,
+				isOnceCallable
+			};
+			return state;
+		});
+		return observerId;
+	};
+	const updateOnFieldRenderedObserver = (key, id, data) => {
+		setOnFieldRenderedObservers((state) => {
+			if (!state[key]) return state;
+			state[key][id] = {
+				...state[key][id],
+				...data
+			};
+			return state;
+		});
+	};
+	const removeOnFieldRenderedObserver = (key, id) => {
+		setOnFieldRenderedObservers((state) => {
+			if (!state[key]) return state;
+			state[key] = Object.keys(state).filter((cbId) => cbId !== id).map((cbId) => state[key][cbId]);
+			return state;
+		});
+	};
+	const onFieldRenderedObserver = (key, data) => {
+		if (!onFieldRenderedObservers[key] || typeof onFieldRenderedObservers[key] !== "object") return;
+		const Observers = onFieldRenderedObservers[key];
+		const FilteredObservers = Object.values(Observers).filter((observer) => !observer?.isObserverWorkedOut);
+		if (FilteredObservers.length === 0) return null;
+		setFormField({ isOnRenderObserversWorkedOut: true }, key);
+		FilteredObservers.map(({ f, isOnceCallable }, id) => {
+			f(data);
+			if (isOnceCallable) updateOnFieldRenderedObserver(key, id, { isObserverWorkedOut: true });
+			return null;
+		});
+	};
+	const onRenderObserverWorker = () => {
+		return getFormFieldsKeys(form)?.map((key) => {
+			const fieldData = getFormField(key);
+			if (!fieldData?.isOnRenderObserversWorkedOut) {
+				onFieldRenderedObserver(key, fieldData);
+				return {
+					key,
+					isWorkedOut: true
+				};
+			}
+			return {
+				key,
+				isWorkedOut: false
+			};
+		});
+	};
+	useEffect(() => {
+		resetOnFieldRenderObserversWorkedOut();
+		onRenderObserverWorker();
+	}, [form]);
+	useEffect(() => {
+		setIsFieldObserversReset(false);
+	}, [FormType]);
+	const scrollToField = ({ key = null, field = null, form: argForm }) => {
+		if (!key && !field) return false;
+		if (!argForm) argForm = form;
+		if (!field) field = getFormField(key, argForm);
+		const { top: topOffset } = (field?.wrapperRef || field?.ref)?.current?.getBoundingClientRect();
+		const scrollTop = Math.abs(Math.abs(topOffset) - Math.abs(window.scrollY)) - 16;
+		window.scrollTo({ top: scrollTop });
+	};
+	const addErrorsToForm = (errors, argForm = form) => {
+		if (!argForm) argForm = form;
+		setFormFields((fields) => {
+			return errors.reduce((fields2, { message: error, propertyPath: errKey }) => {
+				return updateFormField(fields2, { error }, errKey);
+			}, fields);
+		});
+	};
+	return {
+		FormDataDrivers,
+		addOnChangeObserver,
+		removeOnChangeObserver,
+		onChangeObservers,
+		onFieldChange,
+		toggleFormSubmitBlock,
+		clearFormSubmitBlockers,
+		isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
+		renderFormFields,
+		setRenderFormFields,
+		addRenderFields,
+		removeRenderFields,
+		getFieldClassName,
+		isInitFocused,
+		setFirstFieldInitFocused,
+		resetIsInitFocused,
+		setFieldFocus,
+		setFieldBlur,
+		setFirstFieldFocus,
+		autoFocusedField,
+		addFocusFieldOnRender,
+		removeFocusFieldOnRender,
+		addOnFieldRenderedObserver,
+		removeOnFieldRenderedObserver,
+		onFieldRenderedObservers,
+		updateFormField,
+		addOnFormRenderObserver,
+		submitIsFormRendered,
+		resetIsFormRendered,
+		renderFields: ({ form: argForm = form, fields: argFields = renderFormFields, cols: argCols = 1, RenderFieldComponent }) => RenderFields({
+			form: argForm,
+			fields: argFields,
+			cols: argCols,
+			RenderFieldComponent,
+			onFieldChange,
+			FormDataDriver: getFormDataDriver(FormDataDriverName)
+		}),
+		scrollToField,
+		getFieldData,
+		getFormField,
+		setFormFields,
+		setFormField: (data, key) => setFormField(data, key),
+		getFormFieldsAsArray,
+		getFormFieldsKeys,
+		removeAllFormFields,
+		removeFormField,
+		removeFormFields,
+		addErrorsToForm
+	};
+}
+//#endregion
+export { useFormTools as default };
+
+//# sourceMappingURL=index.js.map