@bolttech/form-engine 3.1.0-beta.3 → 3.1.0-beta.5

package/README.md

@@ -2,20 +2,6 @@
 
 This is an adapter to be used with the bolttech form engine. Compatible with Next.js 13 and 14 and react 18.
 
-## SSR compatibility
-
-Leaving behind the slowness that the old version gave us to render the form on the screen, this new version increases the speed of your project a million times, 
-adding to Form-Engine a 🚀 Blazing Fast 🚀 React feature that we can render the Form on the Server, so that it is instantly displayed to the user!
-
-| Without SSR (Form engine v2)                   | With SSR (Form engine v3)              |
-|------------------------------------------------|----------------------------------------|
-| \<Form> Component                              | \<Form> Component                      |
-| ![image](./assets/form-engine-without-ssr.gif) | ![image](./assets/form-engine-ssr.gif) |
-| \<AsFormField> Component                       | \<AsFormField> Component               |
-| ![image](./assets/asformfield-current.gif)     | ![image](./assets/asformfield-ssr.gif) |
-
-## Summary
-
 1. [Sample](#sample)
 2. [mappers](#mappers)
 3. [Form Group Context](#form-group-context)

package/index.esm.js

@@ -1468,73 +1468,6 @@ if (DESCRIPTORS$1 && values.name !== 'values') try {
   defineProperty$1(values, 'name', { value: 'values' });
 } catch (error) { /* empty */ }
 
-var DESCRIPTORS = descriptors;
-var uncurryThis$5 = functionUncurryThis;
-var call$2 = functionCall;
-var fails$6 = fails$h;
-var objectKeys = objectKeys$2;
-var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
-var propertyIsEnumerableModule = objectPropertyIsEnumerable;
-var toObject$1 = toObject$4;
-var IndexedObject = indexedObject;
-
-// eslint-disable-next-line es/no-object-assign -- safe
-var $assign = Object.assign;
-// eslint-disable-next-line es/no-object-defineproperty -- required for testing
-var defineProperty = Object.defineProperty;
-var concat = uncurryThis$5([].concat);
-
-// `Object.assign` method
-// https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$6(function () {
-  // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', {
-    enumerable: true,
-    get: function () {
-      defineProperty(this, 'b', {
-        value: 3,
-        enumerable: false
-      });
-    }
-  }), { b: 2 })).b !== 1) return true;
-  // should work with symbols and should have deterministic property order (V8 bug)
-  var A = {};
-  var B = {};
-  // eslint-disable-next-line es/no-symbol -- safe
-  var symbol = Symbol('assign detection');
-  var alphabet = 'abcdefghijklmnopqrst';
-  A[symbol] = 7;
-  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
-  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
-}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
-  var T = toObject$1(target);
-  var argumentsLength = arguments.length;
-  var index = 1;
-  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
-  var propertyIsEnumerable = propertyIsEnumerableModule.f;
-  while (argumentsLength > index) {
-    var S = IndexedObject(arguments[index++]);
-    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
-    var length = keys.length;
-    var j = 0;
-    var key;
-    while (length > j) {
-      key = keys[j++];
-      if (!DESCRIPTORS || call$2(propertyIsEnumerable, S, key)) T[key] = S[key];
-    }
-  } return T;
-} : $assign;
-
-var $$3 = _export;
-var assign = objectAssign;
-
-// `Object.assign` method
-// https://tc39.es/ecma262/#sec-object.assign
-// eslint-disable-next-line es/no-object-assign -- required for testing
-$$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
-  assign: assign
-});
-
 // iterable DOM collections
 // flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
 var domIterables = {
@@ -1672,9 +1605,9 @@ var toString$3 = function (argument) {
   return $String(argument);
 };
 
-var uncurryThis$4 = functionUncurryThis;
+var uncurryThis$5 = functionUncurryThis;
 
-var arraySlice$1 = uncurryThis$4([].slice);
+var arraySlice$1 = uncurryThis$5([].slice);
 
 var arraySlice = arraySlice$1;
 
@@ -1718,11 +1651,11 @@ var sort = function (array, comparefn) {
 
 var arraySort = sort;
 
-var fails$5 = fails$h;
+var fails$6 = fails$h;
 
 var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
   var method = [][METHOD_NAME];
-  return !!method && fails$5(function () {
+  return !!method && fails$6(function () {
     // eslint-disable-next-line no-useless-call -- required for testing
     method.call(null, argument || function () { return 1; }, 1);
   });
@@ -1744,14 +1677,14 @@ var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
 
 var engineWebkitVersion = !!webkit && +webkit[1];
 
-var $$2 = _export;
-var uncurryThis$3 = functionUncurryThis;
+var $$3 = _export;
+var uncurryThis$4 = functionUncurryThis;
 var aCallable = aCallable$3;
-var toObject = toObject$4;
+var toObject$1 = toObject$4;
 var lengthOfArrayLike = lengthOfArrayLike$2;
 var deletePropertyOrThrow = deletePropertyOrThrow$1;
 var toString$2 = toString$3;
-var fails$4 = fails$h;
+var fails$5 = fails$h;
 var internalSort = arraySort;
 var arrayMethodIsStrict = arrayMethodIsStrict$1;
 var FF = engineFfVersion;
@@ -1760,21 +1693,21 @@ var V8 = engineV8Version;
 var WEBKIT = engineWebkitVersion;
 
 var test = [];
-var nativeSort = uncurryThis$3(test.sort);
-var push = uncurryThis$3(test.push);
+var nativeSort = uncurryThis$4(test.sort);
+var push = uncurryThis$4(test.push);
 
 // IE8-
-var FAILS_ON_UNDEFINED = fails$4(function () {
+var FAILS_ON_UNDEFINED = fails$5(function () {
   test.sort(undefined);
 });
 // V8 bug
-var FAILS_ON_NULL = fails$4(function () {
+var FAILS_ON_NULL = fails$5(function () {
   test.sort(null);
 });
 // Old WebKit
 var STRICT_METHOD = arrayMethodIsStrict('sort');
 
-var STABLE_SORT = !fails$4(function () {
+var STABLE_SORT = !fails$5(function () {
   // feature detection can be too slow, so check engines versions
   if (V8) return V8 < 70;
   if (FF && FF > 3) return;
@@ -1822,11 +1755,11 @@ var getSortCompare = function (comparefn) {
 
 // `Array.prototype.sort` method
 // https://tc39.es/ecma262/#sec-array.prototype.sort
-$$2({ target: 'Array', proto: true, forced: FORCED }, {
+$$3({ target: 'Array', proto: true, forced: FORCED }, {
   sort: function sort(comparefn) {
     if (comparefn !== undefined) aCallable(comparefn);
 
-    var array = toObject(this);
+    var array = toObject$1(this);
 
     if (STABLE_SORT) return comparefn === undefined ? nativeSort(array) : nativeSort(array, comparefn);
 
@@ -1850,6 +1783,73 @@ $$2({ target: 'Array', proto: true, forced: FORCED }, {
   }
 });
 
+var DESCRIPTORS = descriptors;
+var uncurryThis$3 = functionUncurryThis;
+var call$2 = functionCall;
+var fails$4 = fails$h;
+var objectKeys = objectKeys$2;
+var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
+var propertyIsEnumerableModule = objectPropertyIsEnumerable;
+var toObject = toObject$4;
+var IndexedObject = indexedObject;
+
+// eslint-disable-next-line es/no-object-assign -- safe
+var $assign = Object.assign;
+// eslint-disable-next-line es/no-object-defineproperty -- required for testing
+var defineProperty = Object.defineProperty;
+var concat = uncurryThis$3([].concat);
+
+// `Object.assign` method
+// https://tc39.es/ecma262/#sec-object.assign
+var objectAssign = !$assign || fails$4(function () {
+  // should have correct order of operations (Edge bug)
+  if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', {
+    enumerable: true,
+    get: function () {
+      defineProperty(this, 'b', {
+        value: 3,
+        enumerable: false
+      });
+    }
+  }), { b: 2 })).b !== 1) return true;
+  // should work with symbols and should have deterministic property order (V8 bug)
+  var A = {};
+  var B = {};
+  // eslint-disable-next-line es/no-symbol -- safe
+  var symbol = Symbol('assign detection');
+  var alphabet = 'abcdefghijklmnopqrst';
+  A[symbol] = 7;
+  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
+  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
+}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
+  var T = toObject(target);
+  var argumentsLength = arguments.length;
+  var index = 1;
+  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
+  var propertyIsEnumerable = propertyIsEnumerableModule.f;
+  while (argumentsLength > index) {
+    var S = IndexedObject(arguments[index++]);
+    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
+    var length = keys.length;
+    var j = 0;
+    var key;
+    while (length > j) {
+      key = keys[j++];
+      if (!DESCRIPTORS || call$2(propertyIsEnumerable, S, key)) T[key] = S[key];
+    }
+  } return T;
+} : $assign;
+
+var $$2 = _export;
+var assign = objectAssign;
+
+// `Object.assign` method
+// https://tc39.es/ecma262/#sec-object.assign
+// eslint-disable-next-line es/no-object-assign -- required for testing
+$$2({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
+  assign: assign
+});
+
 var anObject$1 = anObject$6;
 
 // `RegExp.prototype.flags` getter implementation
@@ -1987,128 +1987,309 @@ $$1({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
   }
 });
 
-const FormGroupContext = /*#__PURE__*/createContext({});
-/**
- * context interface to be used isolated or with the context provider
- *
- * @param {TFormContextProvider} param context parameters
- * @returns {TFormContext}
- */
-const IsolatedContext = ({
-  debugMode: _debugMode = false,
-  mappers,
-  config
-}) => {
-  const formGroupInstance = useRef(new FormGroup({
-    config
-  }));
-  const addFormWithIndex = index => {
-    formGroupInstance.current.createFormWithIndex({
-      index,
-      mappers
-    });
-  };
-  const addForm = ({
-    key,
-    formInstance
-  }) => {
-    formGroupInstance.current.addForm({
-      key,
-      formInstance
-    });
-  };
-  const removeForm = ({
-    key
-  }) => {
-    formGroupInstance.current.removeForm({
-      key
-    });
-  };
-  const getForm = ({
-    key
-  }) => formGroupInstance.current.getForm({
-    key
-  });
-  const printFormGroupInstance = () => {
-    console.log(formGroupInstance.current.printFormGroupInstance());
-  };
-  function submitMultipleFormsByIndex(indexes) {
-    return formGroupInstance.current.submitMultipleFormsByIndex(indexes);
-  }
-  return {
-    addFormWithIndex,
-    addForm,
-    getForm,
-    removeForm,
-    mappers,
-    formGroupInstance: formGroupInstance.current,
-    printFormGroupInstance,
-    submitMultipleFormsByIndex,
-    debugMode: _debugMode,
-    active: false
-  };
-};
-/**
- * context provider to wrap form-engine adapter elements
- *
- * @param {PropsWithChildren<TFormContextProvider>} param context parameters
- * @returns {ReactElement}
- */
-const FormGroupContextProvider = ({
-  children,
-  mappers,
-  debugMode: _debugMode2 = false,
-  config
-}) => {
-  const contextValue = IsolatedContext({
-    mappers,
-    debugMode: _debugMode2,
-    config
-  });
-  contextValue.debugMode = _debugMode2;
-  contextValue.active = true;
-  contextValue.config = config;
-  return jsxs(FormGroupContext.Provider, {
-    value: contextValue,
-    children: [_debugMode2 && jsxs(Fragment, {
-      children: [jsx("button", {
-        onClick: () => console.log(contextValue.formGroupInstance),
-        children: "printGroupInstance"
-      }), jsx("br", {}), jsx("hr", {})]
-    }), children]
-  });
-};
-/**
- * FormGroup context hook to handle context or isolated context implementations
- *
- * @param {TFormContextProvider} props form group context parameters
- * @returns {TFormContext}
- */
-const useFormGroupContext = props => {
-  const context = useContext(FormGroupContext);
-  if (Object.keys(context).length === 0 && props) {
-    return IsolatedContext({
-      debugMode: props.debugMode,
-      mappers: props.mappers
-    });
-  }
-  return context;
-};
+var fails$2 = fails$h;
+var global$3 = global$e;
 
-/**
- * Renders the React element defined on the mappers configuration
- *
- * @param param component props, field instance and children to render
- * @returns
- */
-const FieldWrapperComponentRender = ({
-  props,
-  fieldInstance,
-  children
+// babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
+var $RegExp$2 = global$3.RegExp;
+
+var UNSUPPORTED_Y$1 = fails$2(function () {
+  var re = $RegExp$2('a', 'y');
+  re.lastIndex = 2;
+  return re.exec('abcd') !== null;
+});
+
+// UC Browser bug
+// https://github.com/zloirock/core-js/issues/1008
+var MISSED_STICKY = UNSUPPORTED_Y$1 || fails$2(function () {
+  return !$RegExp$2('a', 'y').sticky;
+});
+
+var BROKEN_CARET = UNSUPPORTED_Y$1 || fails$2(function () {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
+  var re = $RegExp$2('^r', 'gy');
+  re.lastIndex = 2;
+  return re.exec('str') !== null;
+});
+
+var regexpStickyHelpers = {
+  BROKEN_CARET: BROKEN_CARET,
+  MISSED_STICKY: MISSED_STICKY,
+  UNSUPPORTED_Y: UNSUPPORTED_Y$1
+};
+
+var fails$1 = fails$h;
+var global$2 = global$e;
+
+// babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
+var $RegExp$1 = global$2.RegExp;
+
+var regexpUnsupportedDotAll = fails$1(function () {
+  var re = $RegExp$1('.', 's');
+  return !(re.dotAll && re.test('\n') && re.flags === 's');
+});
+
+var fails = fails$h;
+var global$1 = global$e;
+
+// babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
+var $RegExp = global$1.RegExp;
+
+var regexpUnsupportedNcg = fails(function () {
+  var re = $RegExp('(?<a>b)', 'g');
+  return re.exec('b').groups.a !== 'b' ||
+    'b'.replace(re, '$<a>c') !== 'bc';
+});
+
+/* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
+/* eslint-disable regexp/no-useless-quantifier -- testing */
+var call = functionCall;
+var uncurryThis = functionUncurryThis;
+var toString = toString$3;
+var regexpFlags = regexpFlags$1;
+var stickyHelpers = regexpStickyHelpers;
+var shared = shared$4;
+var create = objectCreate;
+var getInternalState = internalState.get;
+var UNSUPPORTED_DOT_ALL = regexpUnsupportedDotAll;
+var UNSUPPORTED_NCG = regexpUnsupportedNcg;
+
+var nativeReplace = shared('native-string-replace', String.prototype.replace);
+var nativeExec = RegExp.prototype.exec;
+var patchedExec = nativeExec;
+var charAt = uncurryThis(''.charAt);
+var indexOf = uncurryThis(''.indexOf);
+var replace = uncurryThis(''.replace);
+var stringSlice = uncurryThis(''.slice);
+
+var UPDATES_LAST_INDEX_WRONG = (function () {
+  var re1 = /a/;
+  var re2 = /b*/g;
+  call(nativeExec, re1, 'a');
+  call(nativeExec, re2, 'a');
+  return re1.lastIndex !== 0 || re2.lastIndex !== 0;
+})();
+
+var UNSUPPORTED_Y = stickyHelpers.BROKEN_CARET;
+
+// nonparticipating capturing group, copied from es5-shim's String#split patch.
+var NPCG_INCLUDED = /()??/.exec('')[1] !== undefined;
+
+var PATCH = UPDATES_LAST_INDEX_WRONG || NPCG_INCLUDED || UNSUPPORTED_Y || UNSUPPORTED_DOT_ALL || UNSUPPORTED_NCG;
+
+if (PATCH) {
+  patchedExec = function exec(string) {
+    var re = this;
+    var state = getInternalState(re);
+    var str = toString(string);
+    var raw = state.raw;
+    var result, reCopy, lastIndex, match, i, object, group;
+
+    if (raw) {
+      raw.lastIndex = re.lastIndex;
+      result = call(patchedExec, raw, str);
+      re.lastIndex = raw.lastIndex;
+      return result;
+    }
+
+    var groups = state.groups;
+    var sticky = UNSUPPORTED_Y && re.sticky;
+    var flags = call(regexpFlags, re);
+    var source = re.source;
+    var charsAdded = 0;
+    var strCopy = str;
+
+    if (sticky) {
+      flags = replace(flags, 'y', '');
+      if (indexOf(flags, 'g') === -1) {
+        flags += 'g';
+      }
+
+      strCopy = stringSlice(str, re.lastIndex);
+      // Support anchored sticky behavior.
+      if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt(str, re.lastIndex - 1) !== '\n')) {
+        source = '(?: ' + source + ')';
+        strCopy = ' ' + strCopy;
+        charsAdded++;
+      }
+      // ^(? + rx + ) is needed, in combination with some str slicing, to
+      // simulate the 'y' flag.
+      reCopy = new RegExp('^(?:' + source + ')', flags);
+    }
+
+    if (NPCG_INCLUDED) {
+      reCopy = new RegExp('^' + source + '$(?!\\s)', flags);
+    }
+    if (UPDATES_LAST_INDEX_WRONG) lastIndex = re.lastIndex;
+
+    match = call(nativeExec, sticky ? reCopy : re, strCopy);
+
+    if (sticky) {
+      if (match) {
+        match.input = stringSlice(match.input, charsAdded);
+        match[0] = stringSlice(match[0], charsAdded);
+        match.index = re.lastIndex;
+        re.lastIndex += match[0].length;
+      } else re.lastIndex = 0;
+    } else if (UPDATES_LAST_INDEX_WRONG && match) {
+      re.lastIndex = re.global ? match.index + match[0].length : lastIndex;
+    }
+    if (NPCG_INCLUDED && match && match.length > 1) {
+      // Fix browsers whose `exec` methods don't consistently return `undefined`
+      // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
+      call(nativeReplace, match[0], reCopy, function () {
+        for (i = 1; i < arguments.length - 2; i++) {
+          if (arguments[i] === undefined) match[i] = undefined;
+        }
+      });
+    }
+
+    if (match && groups) {
+      match.groups = object = create(null);
+      for (i = 0; i < groups.length; i++) {
+        group = groups[i];
+        object[group[0]] = match[group[1]];
+      }
+    }
+
+    return match;
+  };
+}
+
+var regexpExec = patchedExec;
+
+var $ = _export;
+var exec = regexpExec;
+
+// `RegExp.prototype.exec` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.exec
+$({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
+  exec: exec
+});
+
+const FormGroupContext = /*#__PURE__*/createContext({});
+/**
+ * context interface to be used isolated or with the context provider
+ *
+ * @param {TFormContextProvider} param context parameters
+ * @returns {TFormContext}
+ */
+const IsolatedContext = ({
+  debugMode: _debugMode = false,
+  mappers,
+  config
+}) => {
+  const formGroupInstance = useRef(new FormGroup({
+    config
+  }));
+  const addFormWithIndex = index => {
+    formGroupInstance.current.createFormWithIndex({
+      index,
+      mappers
+    });
+  };
+  const addForm = ({
+    key,
+    formInstance
+  }) => {
+    formGroupInstance.current.addForm({
+      key,
+      formInstance
+    });
+  };
+  const removeForm = ({
+    key
+  }) => {
+    formGroupInstance.current.removeForm({
+      key
+    });
+  };
+  const getForm = ({
+    key
+  }) => formGroupInstance.current.getForm({
+    key
+  });
+  const printFormGroupInstance = () => {
+    console.log(formGroupInstance.current.printFormGroupInstance());
+  };
+  function submitMultipleFormsByIndex(indexes) {
+    return formGroupInstance.current.submitMultipleFormsByIndex(indexes);
+  }
+  return {
+    addFormWithIndex,
+    addForm,
+    getForm,
+    removeForm,
+    mappers,
+    formGroupInstance: formGroupInstance.current,
+    printFormGroupInstance,
+    submitMultipleFormsByIndex,
+    debugMode: _debugMode,
+    active: false
+  };
+};
+/**
+ * context provider to wrap form-engine adapter elements
+ *
+ * @param {PropsWithChildren<TFormContextProvider>} param context parameters
+ * @returns {ReactElement}
+ */
+const FormGroupContextProvider = ({
+  children,
+  mappers,
+  debugMode: _debugMode2 = false,
+  config
+}) => {
+  const contextValue = IsolatedContext({
+    mappers,
+    debugMode: _debugMode2,
+    config
+  });
+  contextValue.debugMode = _debugMode2;
+  contextValue.active = true;
+  contextValue.config = config;
+  return jsxs(FormGroupContext.Provider, {
+    value: contextValue,
+    children: [_debugMode2 && jsxs(Fragment, {
+      children: [jsx("button", {
+        onClick: () => console.log(contextValue.formGroupInstance),
+        children: "printGroupInstance"
+      }), jsx("br", {}), jsx("hr", {})]
+    }), children]
+  });
+};
+/**
+ * FormGroup context hook to handle context or isolated context implementations
+ *
+ * @param {TFormContextProvider} props form group context parameters
+ * @returns {TFormContext}
+ */
+const useFormGroupContext = props => {
+  const context = useContext(FormGroupContext);
+  if (Object.keys(context).length === 0 && props) {
+    return IsolatedContext({
+      debugMode: props.debugMode,
+      mappers: props.mappers
+    });
+  }
+  return context;
+};
+
+/**
+ * Renders the React element defined on the mappers configuration
+ *
+ * @param param component props, field instance and children to render
+ * @returns
+ */
+const FieldWrapperComponentRender = ({
+  props,
+  fieldInstance,
+  children,
+  mapper
 }) => {
   var _a, _b, _c;
-  const Component = (_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.component;
-  const Asynccomponent = (_b = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _b === void 0 ? void 0 : _b.asynccomponent;
+  const Component = (mapper === null || mapper === void 0 ? void 0 : mapper.component) || ((_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.component);
+  const Asynccomponent = (mapper === null || mapper === void 0 ? void 0 : mapper.asynccomponent) || ((_b = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _b === void 0 ? void 0 : _b.asynccomponent);
   if (Component) return jsx(Component, Object.assign({}, props, {
     children: children && children
   }));
@@ -2133,7 +2314,10 @@ const FieldWrapper = ({
   formIndex,
   children,
   props,
-  context
+  context,
+  mounted,
+  mapper,
+  visibility
 }) => {
   var _a, _b, _c;
   const localContext = useFormGroupContext({});
@@ -2144,20 +2328,45 @@ const FieldWrapper = ({
     formGroupInstance,
     debugMode
   } = useMemo(() => context ? context : localContext, [context, localContext]);
-  const fieldInstance = useRef((_a = formGroupInstance.getForm({
-    key: formIndex
-  })) === null || _a === void 0 ? void 0 : _a.getField({
-    key: name
-  })).current;
-  const [valueState, setValueState] = useState((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue) || {});
+  const fieldInstance = useMemo(() => {
+    var _a;
+    return (_a = formGroupInstance.getForm({
+      key: formIndex
+    })) === null || _a === void 0 ? void 0 : _a.getField({
+      key: name
+    });
+  }, [mounted]);
+  const filteredProps = useMemo(() => {
+    let returnProps = {};
+    if (props) {
+      returnProps = Object.assign({}, props);
+      Object.keys(returnProps).forEach(propKey => {
+        if (typeof (returnProps === null || returnProps === void 0 ? void 0 : returnProps[propKey]) === 'string' &&
+        /**
+         * need to check linting on build, this needs to be casted in order to build..
+         */
+        /\$/.test(returnProps === null || returnProps === void 0 ? void 0 : returnProps[propKey])) {
+          delete returnProps[propKey];
+        }
+      });
+      if (mounted) {
+        fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.propsSubject$.next(Object.assign(Object.assign({}, fieldInstance.props), returnProps));
+      }
+    }
+    return returnProps;
+  }, [props]);
+  const [valueState, setValueState] = useState((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue) || {
+    [((_a = mapper === null || mapper === void 0 ? void 0 : mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) || 'value']: ''
+  });
   const [state, setState] = useState({
-    visibility: fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.visibility,
-    props: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.props) || props
+    visibility: visibility,
+    props: (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.props) || filteredProps
   });
   /**
    * handles the mounting and unmounting logic onto the field instance
    */
   useEffect(() => {
+    if (!mounted) return;
     fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mountField({
       valueSubscription: value => {
         setValueState(value);
@@ -2175,33 +2384,34 @@ const FieldWrapper = ({
       }
     });
     return () => {
-      fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField();
+      mounted && (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField());
     };
-  }, []);
+  }, [mounted]);
   /**
    * handles the value change onto the field instance
    */
   const handleChange = useCallback(event => {
+    if (!mounted) return;
     fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitValue({
       value: event,
       event: 'ON_FIELD_CHANGE'
     });
-  }, []);
+  }, [mounted]);
   /**
    * handles the event emission onto the field instance
    */
   const handleEvent = useCallback(event => {
+    if (!mounted) return;
     fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.emitEvents({
       event
     });
-  }, []);
+  }, [mounted]);
   /**
    * handles the mappers configuration to bind the event submission callback
    * to the corresponding prop defined on the mappers
    */
   const mapProps = useMemo(() => {
-    var _a;
-    const events = (_a = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _a === void 0 ? void 0 : _a.events;
+    const events = mapper === null || mapper === void 0 ? void 0 : mapper.events;
     const props = {};
     if (events === null || events === void 0 ? void 0 : events.onBlur) props[events.onBlur] = () => handleEvent('ON_FIELD_BLUR');
     if (events === null || events === void 0 ? void 0 : events.getValue) props[events.getValue] = handleChange;
@@ -2211,8 +2421,8 @@ const FieldWrapper = ({
     if (events === null || events === void 0 ? void 0 : events.onKeyUp) props[events.onKeyUp] = () => handleEvent('ON_FIELD_KEYUP');
     if (events === null || events === void 0 ? void 0 : events.onKeyDown) props[events.onKeyDown] = () => handleEvent('ON_FIELD_KEYDOWN');
     return props;
-  }, []);
-  return (state === null || state === void 0 ? void 0 : state.visibility) ? jsxs(Fragment, {
+  }, [mounted]);
+  return state.visibility ? jsxs(Fragment, {
     children: [debugMode && jsxs("div", {
       style: {
         width: '100%',
@@ -2241,6 +2451,7 @@ const FieldWrapper = ({
     }), jsx(FieldWrapperComponentRender, {
       props: Object.assign(Object.assign(Object.assign(Object.assign({}, mapProps), state.props), state.errors), valueState),
       fieldInstance: fieldInstance,
+      mapper: mapper,
       children: children ? children : ((_c = state === null || state === void 0 ? void 0 : state.props) === null || _c === void 0 ? void 0 : _c.children) ? state === null || state === void 0 ? void 0 : state.props.children : null
     })]
   }) : jsx(Fragment, {});
@@ -2260,7 +2471,7 @@ const BuildTree = ({
   prevPath,
   formIndex
 }) => {
-  return Array.from(fields).sort(([, field], [, field2]) => {
+  const tree = Array.from(fields).sort(([, field], [, field2]) => {
     var _a, _b;
     return (((_a = field.originalSchema) === null || _a === void 0 ? void 0 : _a.order) || 0) - (((_b = field2.originalSchema) === null || _b === void 0 ? void 0 : _b.order) || 0);
   }).filter(([, value]) => {
@@ -2276,9 +2487,12 @@ const BuildTree = ({
     return jsx(FieldWrapper, {
       name: fieldName,
       formIndex: formIndex,
+      visibility: value.visibility,
       children: lenght > 0 ? children : null
     }, fieldName);
   });
+  console.log(tree);
+  return tree;
 };
 /**
  * function to transform AsFormField elements onto a JSON schema
@@ -2521,53 +2735,71 @@ function Form({
     getForm,
     mappers,
     debugMode,
-    formGroupInstance
-  } = useFormGroupContext({});
-  const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema === null || schema === void 0 ? void 0 : schema.index]);
-  const [render, setRender] = useState(false);
-  const formInstance = useRef(new FormCore({
-    schema: Object.assign(Object.assign({}, schema), {
-      index: schemaIndex
-    }),
-    initialValues: initialValues || (schema === null || schema === void 0 ? void 0 : schema.initialValues),
-    iVars: iVars || (schema === null || schema === void 0 ? void 0 : schema.iVars),
-    action: action || (schema === null || schema === void 0 ? void 0 : schema.action),
-    method: method || (schema === null || schema === void 0 ? void 0 : schema.method),
-    index: schemaIndex,
-    mappers,
-    config: config || formGroupInstance.config
-  }));
-  if (schemaIndex === 'defaultChange' || schemaIndex === 'defaultChange-ssr') {
-    console.warn('please, add an unique id to the form, otherwise multiple forms will break');
-  }
-  if (!formGroupInstance.forms.has(schemaIndex)) addForm({
-    key: schemaIndex,
-    formInstance: formInstance.current
-  });
+    formGroupInstance
+  } = useFormGroupContext({});
+  const [tree, setTree] = useState();
+  const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
+  /**
+   * logic to initialize the form instance and it's removal
+   */
+  useEffect(() => {
+    if (schemaIndex === 'defaultChange') {
+      console.warn('please, add an unique id to the form, otherwise multiple forms will break');
+    }
+    const formInstance = new FormCore({
+      schema,
+      initialValues: initialValues || (schema === null || schema === void 0 ? void 0 : schema.initialValues),
+      iVars: iVars || (schema === null || schema === void 0 ? void 0 : schema.iVars),
+      action: action || (schema === null || schema === void 0 ? void 0 : schema.action),
+      method: method || (schema === null || schema === void 0 ? void 0 : schema.method),
+      index: schemaIndex,
+      mappers,
+      config: config || formGroupInstance.config
+    });
+    addForm({
+      key: schemaIndex,
+      formInstance
+    });
+    let subMounted;
+    if (onFormMount) {
+      subMounted = formInstance.subscribeOnMount(onFormMount);
+    }
+    formInstance === null || formInstance === void 0 ? void 0 : formInstance.mounted();
+    /*
+      @TODO check if form instance is killed each time it is unmounted
+      the management of multiple forms needs to be planned
+    */
+    return () => {
+      subMounted === null || subMounted === void 0 ? void 0 : subMounted.unsubscribe();
+      removeForm({
+        key: schemaIndex
+      });
+    };
+  }, []);
   /**
    * logic to transform AsFormFields onto JSON schema
    * and JSON schema onto FieldWrappers, refreshes when
    * the react tree changes it's children
    */
-  const tree = useMemo(() => {
-    var _a, _b;
-    const parsedSchema = BuildAsFormFieldTree({
+  useEffect(() => {
+    var _a;
+    const schema = BuildAsFormFieldTree({
       children
     });
-    parsedSchema && ((_a = getForm({
-      key: schemaIndex
-    })) === null || _a === void 0 ? void 0 : _a.refreshFields(parsedSchema));
-    const fields = (_b = getForm({
-      key: schemaIndex
-    })) === null || _b === void 0 ? void 0 : _b.fields;
+    schema && getForm({
+      key: index
+    }).refreshFields(schema);
+    const fields = (_a = getForm({
+      key: index
+    })) === null || _a === void 0 ? void 0 : _a.fields;
     if (fields) {
       const buildTree = BuildTree({
         fields,
-        formIndex: schemaIndex
+        formIndex: index
       });
-      return buildTree;
+      setTree(buildTree);
     }
-  }, [children, getForm]);
+  }, [children]);
   /**
    * iVars change tracker to update iVars onto form instance
    */
@@ -2584,29 +2816,6 @@ function Form({
       key: schemaIndex
     }).setInitialValues(initialValues);
   }, [initialValues]);
-  /**
-   * logic to mount and manage form removal
-   */
-  useEffect(() => {
-    setRender(true);
-    let subMounted;
-    if (onFormMount) {
-      subMounted = formInstance.current.subscribeOnMount(onFormMount);
-    }
-    formInstance.current.mounted();
-    /*
-      @TODO check if form instance is killed each time it is unmounted
-      the management of multiple forms needs to be planned
-    */
-    return () => {
-      subMounted === null || subMounted === void 0 ? void 0 : subMounted.unsubscribe();
-      if (render) {
-        removeForm({
-          key: schemaIndex
-        });
-      }
-    };
-  }, []);
   /**
    * hook usage to keep event bindings updated on callback functions passed as props
    */
@@ -2624,7 +2833,7 @@ function Form({
     onFormMount,
     onData,
     onValid
-  }, [formInstance]);
+  });
   /*
     @TODO move this logic inside form-core, add action and method onto form element,
     might need a ref of the form to collect all the form parameters when there is a
@@ -2671,7 +2880,13 @@ function Form({
       }), jsx("br", {}), jsx("hr", {})]
     }), jsx("form", {
       onSubmit: handleSubmit,
-      children: tree && tree
+      children: BuildTree({
+        fields: FormCore.serializeStructure({
+          mappers: mappers || [],
+          struct: schema === null || schema === void 0 ? void 0 : schema.components
+        }),
+        formIndex: schemaIndex
+      })
     })]
   });
 }
@@ -2689,186 +2904,6 @@ const AsFormField = props => {
   return props.children;
 };
 
-var fails$2 = fails$h;
-var global$3 = global$e;
-
-// babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
-var $RegExp$2 = global$3.RegExp;
-
-var UNSUPPORTED_Y$1 = fails$2(function () {
-  var re = $RegExp$2('a', 'y');
-  re.lastIndex = 2;
-  return re.exec('abcd') !== null;
-});
-
-// UC Browser bug
-// https://github.com/zloirock/core-js/issues/1008
-var MISSED_STICKY = UNSUPPORTED_Y$1 || fails$2(function () {
-  return !$RegExp$2('a', 'y').sticky;
-});
-
-var BROKEN_CARET = UNSUPPORTED_Y$1 || fails$2(function () {
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
-  var re = $RegExp$2('^r', 'gy');
-  re.lastIndex = 2;
-  return re.exec('str') !== null;
-});
-
-var regexpStickyHelpers = {
-  BROKEN_CARET: BROKEN_CARET,
-  MISSED_STICKY: MISSED_STICKY,
-  UNSUPPORTED_Y: UNSUPPORTED_Y$1
-};
-
-var fails$1 = fails$h;
-var global$2 = global$e;
-
-// babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
-var $RegExp$1 = global$2.RegExp;
-
-var regexpUnsupportedDotAll = fails$1(function () {
-  var re = $RegExp$1('.', 's');
-  return !(re.dotAll && re.test('\n') && re.flags === 's');
-});
-
-var fails = fails$h;
-var global$1 = global$e;
-
-// babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
-var $RegExp = global$1.RegExp;
-
-var regexpUnsupportedNcg = fails(function () {
-  var re = $RegExp('(?<a>b)', 'g');
-  return re.exec('b').groups.a !== 'b' ||
-    'b'.replace(re, '$<a>c') !== 'bc';
-});
-
-/* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
-/* eslint-disable regexp/no-useless-quantifier -- testing */
-var call = functionCall;
-var uncurryThis = functionUncurryThis;
-var toString = toString$3;
-var regexpFlags = regexpFlags$1;
-var stickyHelpers = regexpStickyHelpers;
-var shared = shared$4;
-var create = objectCreate;
-var getInternalState = internalState.get;
-var UNSUPPORTED_DOT_ALL = regexpUnsupportedDotAll;
-var UNSUPPORTED_NCG = regexpUnsupportedNcg;
-
-var nativeReplace = shared('native-string-replace', String.prototype.replace);
-var nativeExec = RegExp.prototype.exec;
-var patchedExec = nativeExec;
-var charAt = uncurryThis(''.charAt);
-var indexOf = uncurryThis(''.indexOf);
-var replace = uncurryThis(''.replace);
-var stringSlice = uncurryThis(''.slice);
-
-var UPDATES_LAST_INDEX_WRONG = (function () {
-  var re1 = /a/;
-  var re2 = /b*/g;
-  call(nativeExec, re1, 'a');
-  call(nativeExec, re2, 'a');
-  return re1.lastIndex !== 0 || re2.lastIndex !== 0;
-})();
-
-var UNSUPPORTED_Y = stickyHelpers.BROKEN_CARET;
-
-// nonparticipating capturing group, copied from es5-shim's String#split patch.
-var NPCG_INCLUDED = /()??/.exec('')[1] !== undefined;
-
-var PATCH = UPDATES_LAST_INDEX_WRONG || NPCG_INCLUDED || UNSUPPORTED_Y || UNSUPPORTED_DOT_ALL || UNSUPPORTED_NCG;
-
-if (PATCH) {
-  patchedExec = function exec(string) {
-    var re = this;
-    var state = getInternalState(re);
-    var str = toString(string);
-    var raw = state.raw;
-    var result, reCopy, lastIndex, match, i, object, group;
-
-    if (raw) {
-      raw.lastIndex = re.lastIndex;
-      result = call(patchedExec, raw, str);
-      re.lastIndex = raw.lastIndex;
-      return result;
-    }
-
-    var groups = state.groups;
-    var sticky = UNSUPPORTED_Y && re.sticky;
-    var flags = call(regexpFlags, re);
-    var source = re.source;
-    var charsAdded = 0;
-    var strCopy = str;
-
-    if (sticky) {
-      flags = replace(flags, 'y', '');
-      if (indexOf(flags, 'g') === -1) {
-        flags += 'g';
-      }
-
-      strCopy = stringSlice(str, re.lastIndex);
-      // Support anchored sticky behavior.
-      if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt(str, re.lastIndex - 1) !== '\n')) {
-        source = '(?: ' + source + ')';
-        strCopy = ' ' + strCopy;
-        charsAdded++;
-      }
-      // ^(? + rx + ) is needed, in combination with some str slicing, to
-      // simulate the 'y' flag.
-      reCopy = new RegExp('^(?:' + source + ')', flags);
-    }
-
-    if (NPCG_INCLUDED) {
-      reCopy = new RegExp('^' + source + '$(?!\\s)', flags);
-    }
-    if (UPDATES_LAST_INDEX_WRONG) lastIndex = re.lastIndex;
-
-    match = call(nativeExec, sticky ? reCopy : re, strCopy);
-
-    if (sticky) {
-      if (match) {
-        match.input = stringSlice(match.input, charsAdded);
-        match[0] = stringSlice(match[0], charsAdded);
-        match.index = re.lastIndex;
-        re.lastIndex += match[0].length;
-      } else re.lastIndex = 0;
-    } else if (UPDATES_LAST_INDEX_WRONG && match) {
-      re.lastIndex = re.global ? match.index + match[0].length : lastIndex;
-    }
-    if (NPCG_INCLUDED && match && match.length > 1) {
-      // Fix browsers whose `exec` methods don't consistently return `undefined`
-      // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
-      call(nativeReplace, match[0], reCopy, function () {
-        for (i = 1; i < arguments.length - 2; i++) {
-          if (arguments[i] === undefined) match[i] = undefined;
-        }
-      });
-    }
-
-    if (match && groups) {
-      match.groups = object = create(null);
-      for (i = 0; i < groups.length; i++) {
-        group = groups[i];
-        object[group[0]] = match[group[1]];
-      }
-    }
-
-    return match;
-  };
-}
-
-var regexpExec = patchedExec;
-
-var $ = _export;
-var exec = regexpExec;
-
-// `RegExp.prototype.exec` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.exec
-$({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
-  exec: exec
-});
-
 /**
  * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
  * it won't rely on them and needs to be manually declared
@@ -2877,65 +2912,35 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
  * @returns {ReactElement}
  */
 const AsFormFieldBuilder = props => {
-  var _a;
   const context = useFormGroupContext({});
-  const [render, setRender] = useState(false);
-  const fieldName = props.name;
-  if (!((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) context.addFormWithIndex(props.formIndex);
-  const formInstance = context.formGroupInstance.forms.get(props.formIndex);
-  if (!(formInstance === null || formInstance === void 0 ? void 0 : formInstance.fields.has(fieldName))) {
-    const fieldSchema = Object.assign(Object.assign(Object.assign({}, props), {
-      name: fieldName
-    }), {
+  /**
+   * state to track the field instance creation process
+   */
+  const [mounted, setMounted] = useState(false);
+  /**
+   * initializer to create or add a form instance to the formGroup by it's formId
+   * and add the field to the form instance
+   * Also has the logic to remove it once this element is removed
+   */
+  useEffect(() => {
+    var _a;
+    if (!((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) {
+      context.addFormWithIndex(props.formIndex);
+    }
+    const fieldSchema = Object.assign(Object.assign({}, props), {
       component: props.mapper.componentName,
       children: undefined
     });
+    const formInstance = context.formGroupInstance.forms.get(props.formIndex);
     formInstance === null || formInstance === void 0 ? void 0 : formInstance.addField({
       fieldSchema,
       mapperElement: props.mapper
     });
-    const field = formInstance === null || formInstance === void 0 ? void 0 : formInstance.getField({
-      key: fieldName
+    setMounted(true);
+    return () => formInstance === null || formInstance === void 0 ? void 0 : formInstance.removeField({
+      key: props.name
     });
-    if (typeof (props === null || props === void 0 ? void 0 : props.visibility) !== 'undefined' && field) {
-      field.visibility = props.visibility;
-    }
-  }
-  /**
-   * initializer to create or add a form instance to the formGroup by it's formId
-   * and add the field to the form instance
-   * Also has the logic to remove it once this element is removed
-   */
-  useEffect(() => {
-    setRender(true);
-    return () => {
-      if (render) formInstance === null || formInstance === void 0 ? void 0 : formInstance.removeField({
-        key: fieldName
-      });
-    };
   }, []);
-  /**
-   * expensive function to allow both external props and templating work
-   * evaluate if templating will be done onto form-engine or not
-   */
-  useEffect(() => {
-    var _a;
-    const field = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(fieldName);
-    const fieldProps = field === null || field === void 0 ? void 0 : field.props;
-    if (props.props) {
-      Object.keys(props.props).forEach(propKey => {
-        var _a, _b;
-        if (typeof ((_a = props.props) === null || _a === void 0 ? void 0 : _a[propKey]) === 'string' &&
-        /**
-         * need to check linting on build, this needs to be casted in order to build..
-         */
-        /\$/.test((_b = props.props) === null || _b === void 0 ? void 0 : _b[propKey])) {
-          delete props.props[propKey];
-        }
-      });
-    }
-    field === null || field === void 0 ? void 0 : field.propsSubject$.next(Object.assign(Object.assign({}, fieldProps), props.props));
-  }, [props.props, fieldName]);
   /**
    * allows to control field selected value on each event
    */
@@ -2954,9 +2959,12 @@ const AsFormFieldBuilder = props => {
   }, [props.onSelected]);
   return jsx(FieldWrapper, {
     formIndex: props.formIndex,
-    name: fieldName,
+    name: props.name,
     props: props.props,
     context: !context.active ? context : null,
+    mounted: mounted,
+    mapper: props.mapper,
+    visibility: props.visibility || true,
     children: props.children && props.children
   });
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.0-beta.3",
+  "version": "3.1.0-beta.5",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "1.0.0-beta.3",
+    "@bolttech/form-engine-core": "1.0.0-beta.5",
     "react": "18.2.0",
     "rxjs": "7.8.1"
   },

package/src/components/FieldWrapper/FieldWrapper.d.ts

@@ -7,5 +7,5 @@ import { TFieldWrapperProps } from './FieldWrapper.type';
  * @param {TFieldWrapperProps} param FieldWrapper params
  * @returns {ReactElement}
  */
-declare const FieldWrapper: ({ name, formIndex, children, props, context, }: TFieldWrapperProps) => ReactElement;
+declare const FieldWrapper: ({ name, formIndex, children, props, context, mounted, mapper, visibility, }: TFieldWrapperProps) => ReactElement;
 export default FieldWrapper;

package/src/components/FieldWrapper/FieldWrapper.type.d.ts

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { ElementType, PropsWithChildren } from 'react';
 import { TFieldWrapper } from '../../types';
 import { TFormContext } from '../../context/FormGroupContext';
-import { FormField } from '@bolttech/form-engine-core';
+import { FormField, TMapper } from '@bolttech/form-engine-core';
 /**
  * Represents the props for a field wrapper component, including children.
  *
@@ -13,6 +13,9 @@ import { FormField } from '@bolttech/form-engine-core';
 type TFieldWrapperProps = PropsWithChildren<TFieldWrapper & {
     props?: Record<string, unknown>;
     context?: TFormContext | null;
+    mounted?: boolean;
+    mapper?: TMapper<ElementType>;
+    visibility?: boolean;
 }>;
 /**
  * Represents the props for rendering a field wrapper component, including children.
@@ -24,5 +27,6 @@ type TFieldWrapperProps = PropsWithChildren<TFieldWrapper & {
 type TFieldWrapperComponentRenderProps = PropsWithChildren<{
     props: Record<string, unknown>;
     fieldInstance?: FormField;
+    mapper?: TMapper<ElementType>;
 }>;
 export type { TFieldWrapperProps, TFieldWrapperComponentRenderProps };