@bolttech/form-engine 3.1.0-beta.9 → 3.1.1-beta.0

package/README.md

@@ -25,6 +25,8 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 - 6.7 [resetValues](#resetvalues)
 - 6.8 [visibilityConditions](#visibilityconditions)
 - 6.9 [resetPropertyValues](#resetpropertyvalues)
+- 6.10 [visibility](#visibility)
+- 6.11 [persistValue](#persistValue)
 
 7. [templating](#templating)
 
@@ -1003,6 +1005,18 @@ resetPropertyValues: [
 ],
 ```
 
+<a id="visibility">
+
+## **visibility**
+
+visibility prop is used to initiate the component with an initial visibility flag, before visibilityConditions take place, used on SSR
+
+<a id="persistValue">
+
+## **persistValue**
+
+persistValue is a flag that deremines if the field gets hidden, the moment it comes back visible, it will hold the previous value or not
+
 <a id="templating"></a>
 
 ## **templating**

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback, Suspense } from 'react';
-import { FormGroup, FormCore, FormField } from '@bolttech/form-engine-core';
+import { FormGroup, FormField } from '@bolttech/form-engine-core';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -88,7 +88,7 @@ var check = function (it) {
 };
 
 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global$b =
+var globalThis_1 =
   // eslint-disable-next-line es/no-global-this -- safe
   check(typeof globalThis == 'object' && globalThis) ||
   check(typeof window == 'object' && window) ||
@@ -101,30 +101,30 @@ var global$b =
 
 var sharedStore = {exports: {}};
 
-var global$a = global$b;
+var globalThis$c = globalThis_1;
 
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$5 = Object.defineProperty;
 
 var defineGlobalProperty$3 = function (key, value) {
   try {
-    defineProperty$5(global$a, key, { value: value, configurable: true, writable: true });
+    defineProperty$5(globalThis$c, key, { value: value, configurable: true, writable: true });
   } catch (error) {
-    global$a[key] = value;
+    globalThis$c[key] = value;
   } return value;
 };
 
-var globalThis$1 = global$b;
+var globalThis$b = globalThis_1;
 var defineGlobalProperty$2 = defineGlobalProperty$3;
 
 var SHARED = '__core-js_shared__';
-var store$3 = sharedStore.exports = globalThis$1[SHARED] || defineGlobalProperty$2(SHARED, {});
+var store$3 = sharedStore.exports = globalThis$b[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 (store$3.versions || (store$3.versions = [])).push({
-  version: '3.37.1',
+  version: '3.39.0',
   mode: 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.37.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -166,13 +166,18 @@ var uid$2 = function (key) {
   return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString(++id + postfix, 36);
 };
 
-var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
+var globalThis$a = globalThis_1;
 
-var global$9 = global$b;
-var userAgent = engineUserAgent;
+var navigator = globalThis$a.navigator;
+var userAgent$1 = navigator && navigator.userAgent;
 
-var process = global$9.process;
-var Deno = global$9.Deno;
+var environmentUserAgent = userAgent$1 ? String(userAgent$1) : '';
+
+var globalThis$9 = globalThis_1;
+var userAgent = environmentUserAgent;
+
+var process = globalThis$9.process;
+var Deno = globalThis$9.Deno;
 var versions = process && process.versions || Deno && Deno.version;
 var v8 = versions && versions.v8;
 var match, version;
@@ -194,14 +199,14 @@ if (!version && userAgent) {
   }
 }
 
-var engineV8Version = version;
+var environmentV8Version = version;
 
 /* eslint-disable es/no-symbol -- required for testing */
-var V8_VERSION = engineV8Version;
+var V8_VERSION = environmentV8Version;
 var fails$8 = fails$b;
-var global$8 = global$b;
+var globalThis$8 = globalThis_1;
 
-var $String$4 = global$8.String;
+var $String$4 = globalThis$8.String;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
 var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$8(function () {
@@ -218,18 +223,18 @@ var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$8(func
 /* eslint-disable es/no-symbol -- required for testing */
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 
-var useSymbolAsUid = NATIVE_SYMBOL$1
-  && !Symbol.sham
-  && typeof Symbol.iterator == 'symbol';
+var useSymbolAsUid = NATIVE_SYMBOL$1 &&
+  !Symbol.sham &&
+  typeof Symbol.iterator == 'symbol';
 
-var global$7 = global$b;
+var globalThis$7 = globalThis_1;
 var shared$2 = shared$3;
 var hasOwn$8 = hasOwnProperty_1;
 var uid$1 = uid$2;
 var NATIVE_SYMBOL = symbolConstructorDetection;
 var USE_SYMBOL_AS_UID$1 = useSymbolAsUid;
 
-var Symbol$1 = global$7.Symbol;
+var Symbol$1 = globalThis$7.Symbol;
 var WellKnownSymbolsStore = shared$2('wks');
 var createWellKnownSymbol = USE_SYMBOL_AS_UID$1 ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
 
@@ -295,10 +300,10 @@ var v8PrototypeDefineBug = DESCRIPTORS$9 && fails$6(function () {
 
 var objectDefineProperty = {};
 
-var global$6 = global$b;
+var globalThis$6 = globalThis_1;
 var isObject$6 = isObject$8;
 
-var document$1 = global$6.document;
+var document$1 = globalThis$6.document;
 // typeof document.createElement is 'object' in old IE
 var EXISTS$1 = isObject$6(document$1) && isObject$6(document$1.createElement);
 
@@ -326,7 +331,7 @@ var functionCall = NATIVE_BIND ? call$5.bind(call$5) : function () {
   return call$5.apply(call$5, arguments);
 };
 
-var global$5 = global$b;
+var globalThis$5 = globalThis_1;
 var isCallable$b = isCallable$d;
 
 var aFunction = function (argument) {
@@ -334,7 +339,7 @@ var aFunction = function (argument) {
 };
 
 var getBuiltIn$3 = function (namespace, method) {
-  return arguments.length < 2 ? aFunction(global$5[namespace]) : global$5[namespace] && global$5[namespace][method];
+  return arguments.length < 2 ? aFunction(globalThis$5[namespace]) : globalThis$5[namespace] && globalThis$5[namespace][method];
 };
 
 var uncurryThis$6 = functionUncurryThis;
@@ -673,7 +678,8 @@ var NullProtoObjectViaActiveX = function (activeXDocument) {
   activeXDocument.write(scriptTag(''));
   activeXDocument.close();
   var temp = activeXDocument.parentWindow.Object;
-  activeXDocument = null; // avoid memory leak
+  // eslint-disable-next-line no-useless-assignment -- avoid memory leak
+  activeXDocument = null;
   return temp;
 };
 
@@ -754,10 +760,10 @@ var addToUnscopables$1 = function (key) {
 
 var iterators = {};
 
-var global$4 = global$b;
+var globalThis$4 = globalThis_1;
 var isCallable$7 = isCallable$d;
 
-var WeakMap$1 = global$4.WeakMap;
+var WeakMap$1 = globalThis$4.WeakMap;
 
 var weakMapBasicDetection = isCallable$7(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
@@ -782,7 +788,7 @@ var createNonEnumerableProperty$4 = DESCRIPTORS$5 ? function (object, key, value
 };
 
 var NATIVE_WEAK_MAP = weakMapBasicDetection;
-var global$3 = global$b;
+var globalThis$3 = globalThis_1;
 var isObject$3 = isObject$8;
 var createNonEnumerableProperty$3 = createNonEnumerableProperty$4;
 var hasOwn$6 = hasOwnProperty_1;
@@ -791,8 +797,8 @@ var sharedKey$1 = sharedKey$3;
 var hiddenKeys$1 = hiddenKeys$4;
 
 var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-var TypeError$1 = global$3.TypeError;
-var WeakMap = global$3.WeakMap;
+var TypeError$1 = globalThis$3.TypeError;
+var WeakMap = globalThis$3.WeakMap;
 var set, get, has;
 
 var enforce = function (it) {
@@ -1085,7 +1091,7 @@ var POLYFILL = isForced$1.POLYFILL = 'P';
 
 var isForced_1 = isForced$1;
 
-var global$2 = global$b;
+var globalThis$2 = globalThis_1;
 var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 var createNonEnumerableProperty$2 = createNonEnumerableProperty$4;
 var defineBuiltIn$2 = defineBuiltIn$3;
@@ -1114,11 +1120,11 @@ var _export = function (options, source) {
   var STATIC = options.stat;
   var FORCED, target, key, targetProperty, sourceProperty, descriptor;
   if (GLOBAL) {
-    target = global$2;
+    target = globalThis$2;
   } else if (STATIC) {
-    target = global$2[TARGET] || defineGlobalProperty(TARGET, {});
+    target = globalThis$2[TARGET] || defineGlobalProperty(TARGET, {});
   } else {
-    target = global$2[TARGET] && global$2[TARGET].prototype;
+    target = globalThis$2[TARGET] && globalThis$2[TARGET].prototype;
   }
   if (target) for (key in source) {
     sourceProperty = source[key];
@@ -1444,7 +1450,7 @@ var es_array_iterator = defineIterator(Array, 'Array', function (iterated, kind)
   var target = state.target;
   var index = state.index++;
   if (!target || index >= target.length) {
-    state.target = undefined;
+    state.target = null;
     return createIterResultObject(undefined, true);
   }
   switch (state.kind) {
@@ -1512,7 +1518,7 @@ var DOMTokenListPrototype$1 = classList && classList.constructor && classList.co
 
 var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
 
-var global$1 = global$b;
+var globalThis$1 = globalThis_1;
 var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
@@ -1544,7 +1550,7 @@ var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
 };
 
 for (var COLLECTION_NAME in DOMIterables) {
-  handlePrototype(global$1[COLLECTION_NAME] && global$1[COLLECTION_NAME].prototype, COLLECTION_NAME);
+  handlePrototype(globalThis$1[COLLECTION_NAME] && globalThis$1[COLLECTION_NAME].prototype, COLLECTION_NAME);
 }
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
@@ -1656,6 +1662,7 @@ const IsolatedContext = ({
   const formGroupInstance = useRef(new FormGroup({
     config
   }));
+  const formGroupContextMountRef = useRef(false);
   const addFormWithIndex = index => {
     formGroupInstance.current.createFormWithIndex({
       index,
@@ -1664,11 +1671,11 @@ const IsolatedContext = ({
   };
   const addForm = ({
     key,
-    formInstance
+    params
   }) => {
     formGroupInstance.current.addForm({
       key,
-      formInstance
+      params
     });
   };
   const removeForm = ({
@@ -1686,9 +1693,23 @@ const IsolatedContext = ({
   const printFormGroupInstance = () => {
     console.log(formGroupInstance.current.printFormGroupInstance());
   };
-  function submitMultipleFormsByIndex(indexes) {
-    return formGroupInstance.current.submitMultipleFormsByIndex(indexes);
+  function submitMultipleFormsByIndex(indexes, callback) {
+    return formGroupInstance.current.submitMultipleFormsByIndex(indexes, callback);
   }
+  useEffect(() => {
+    return () => {
+      if (formGroupContextMountRef.current) {
+        // strictMode made me do this, Beato Carlo Acutis please forgive me
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        formGroupInstance.current.destroy();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      formGroupContextMountRef.current = true;
+    };
+  }, []);
   return {
     addFormWithIndex,
     addForm,
@@ -1791,8 +1812,10 @@ const eventsMapping = {
   ON_FIELD_KEYDOWN: 'onKeyDown',
   ON_FIELD_KEYUP: 'onKeyUp',
   ON_FIELD_MOUNT: 'onMount',
+  ON_API_FIELD_REQUEST: 'onApiRequest',
   ON_API_FIELD_RESPONSE: 'onApiResponse',
-  ON_FIELD_CLICK: 'onClick'
+  ON_FIELD_CLICK: 'onClick',
+  ON_FIELD_CLEARED: 'onFieldCleared'
 };
 
 /**
@@ -1939,7 +1962,7 @@ function Form({
     if (mountedRef.current) return;
     formGroupInstance.addForm({
       key: schemaIndex,
-      formInstance: new FormCore({
+      params: {
         schema,
         initialValues: initialValues || (schema === null || schema === void 0 ? void 0 : schema.initialValues),
         iVars: iVars || (schema === null || schema === void 0 ? void 0 : schema.iVars),
@@ -1948,7 +1971,7 @@ function Form({
         index: schemaIndex,
         mappers,
         config: config || formGroupInstance.config
-      })
+      }
     });
     setMounted(true);
     mountedRef.current = true;
@@ -2142,12 +2165,11 @@ const FieldWrapper = ({
     visibility: typeof visibility === 'boolean' ? visibility : true,
     props: filteredProps
   });
-  const mountedRef = useRef(false);
   /**
    * handles the mounting and unmounting logic onto the field instance
    */
   useEffect(() => {
-    if (!fieldInstance || mountedRef.current) return;
+    if (!fieldInstance || (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mounted)) return;
     fieldInstance.mountField({
       valueSubscription: value => {
         setValueState(value);
@@ -2164,14 +2186,13 @@ const FieldWrapper = ({
         }));
       }
     });
-    mountedRef.current = true;
   }, [fieldInstance]);
   /**
    * recycle effect to remove the field Subscriptions due to memory leaks
    */
   useEffect(() => {
     return () => {
-      mountedRef.current && (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField());
+      (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mounted) && (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField());
     };
   }, []);
   /**
@@ -2397,6 +2418,11 @@ const checkedChangeEvent = event => {
 const valueChangeEvent = event => {
   return event.target.value;
 };
+const numberInputChangeEvent = number => {
+  if (number) {
+    return Number(number);
+  }
+};
 const datepickerChangeEvent = event => event;
 const dropdownChangeEvent = (event, opts) => {
   if (typeof event === 'object' && event !== null && 'value' in event && 'id' in event) {
@@ -2404,7 +2430,7 @@ const dropdownChangeEvent = (event, opts) => {
       _value: event === null || event === void 0 ? void 0 : event.id,
       _metadata: event
     };
-  } else if (typeof event === 'string' && typeof opts === 'object' && 'props' in opts && typeof opts.props === 'object' && 'optionList' in opts.props && Array.isArray(opts.props.optionList)) {
+  } else if ((typeof event === 'string' || typeof event === 'number') && typeof opts === 'object' && 'props' in opts && typeof opts.props === 'object' && 'optionList' in opts.props && Array.isArray(opts.props.optionList)) {
     const option = opts.props.optionList.find(el => el.value === event);
     if (option) {
       return {
@@ -2417,7 +2443,12 @@ const dropdownChangeEvent = (event, opts) => {
         _metadata: event
       };
     }
+  } else {
+    return {
+      _value: event,
+      _metadata: event
+    };
   }
 };
 
-export { AsFormField, AsFormFieldBuilder, Form, FormGroupContext, FormGroupContextProvider, checkedChangeEvent, datepickerChangeEvent, defaultChangeEvent, dropdownChangeEvent, useForm, useFormGroup, useFormGroupContext, valueChangeEvent };
+export { AsFormField, AsFormFieldBuilder, Form, FormGroupContext, FormGroupContextProvider, checkedChangeEvent, datepickerChangeEvent, defaultChangeEvent, dropdownChangeEvent, numberInputChangeEvent, useForm, useFormGroup, useFormGroupContext, valueChangeEvent };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.0-beta.9",
+  "version": "3.1.1-beta.0",
   "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.9",
+    "@bolttech/form-engine-core": "1.0.1-beta.0",
     "react": "18.2.0"
   },
   "peerDependencies": {}

package/src/context/FormGroupContext.type.d.ts

@@ -1,4 +1,4 @@
-import { FormCore, TFormCore, TFormGroup, TMapper, TSchemaFormConfig } from '@bolttech/form-engine-core';
+import { FormCore, TFormEntry, TFormGroup, TFormValues, TMapper, TSchemaFormConfig } from '@bolttech/form-engine-core';
 import { ElementType } from 'react';
 /**
  * Represents the context for managing forms within a form group.
@@ -18,7 +18,7 @@ type TFormContext = {
     addFormWithIndex: (index: string) => void;
     addForm: (payload: {
         key: string;
-        formInstance: TFormCore;
+        params: TFormEntry;
     }) => void;
     getForm: (payload: {
         key: string;
@@ -29,7 +29,7 @@ type TFormContext = {
     formGroupInstance: TFormGroup;
     mappers?: TMapper<ElementType>[];
     printFormGroupInstance: () => void;
-    submitMultipleFormsByIndex: (indexes: string[]) => void;
+    submitMultipleFormsByIndex: <T>(indexes: string[], callback?: (payload: TFormValues<T>) => void) => void;
     debugMode: boolean;
     active: boolean;
     config?: TSchemaFormConfig;

package/src/helpers/mapper.d.ts

@@ -2,6 +2,7 @@ import { TValueChangeEvent } from '@bolttech/form-engine-core';
 declare const defaultChangeEvent: TValueChangeEvent;
 declare const checkedChangeEvent: TValueChangeEvent;
 declare const valueChangeEvent: TValueChangeEvent;
+declare const numberInputChangeEvent: TValueChangeEvent;
 declare const datepickerChangeEvent: TValueChangeEvent;
 declare const dropdownChangeEvent: TValueChangeEvent;
-export { defaultChangeEvent, checkedChangeEvent, valueChangeEvent, datepickerChangeEvent, dropdownChangeEvent, };
+export { defaultChangeEvent, checkedChangeEvent, valueChangeEvent, numberInputChangeEvent, datepickerChangeEvent, dropdownChangeEvent, };

package/src/types/index.d.ts

@@ -12,7 +12,7 @@ type TFieldWrapper = {
 /**
  * Represents the possible event properties for form fields callbacks.
  */
-type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onClick';
+type TEventProps = 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'onMount' | 'onApiResponse' | 'onApiRequest' | 'onClick' | 'onFieldCleared';
 /**
  * Represents the content inside onData payload action.
  */