@bolttech/form-engine 3.0.7 → 3.0.9

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { PropsWithChildren, ReactElement, ElementType, ReactNode } from 'react';
-import { TEventProps, TFieldEvent, TEventDataProps, TFormValues, TFormValidationPayload, TFormEntry, IComponentSchemaAsFormField, IComponentSchema, OneOf, TMapper, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, FormCore, TFormGroup, TSchemaFormConfig, TValueChangeEvent } from '@bolttech/form-engine-core';
+import { TEventProps, TFieldEvent, TEventDataProps, TFormValues, TFormValidationPayload, TFormEntry, IComponentSchemaAsFormField, IComponentSchema, OneOf, TMapper, TFormGroupOnDataEventPayload, FormCore, TFormGroup, TSchemaFormConfig, FormField, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, TValueChangeEvent } from '@bolttech/form-engine-core';
 
 /**
  * Represents a field wrapper containing the name of the field and its index in the form.
@@ -157,43 +157,6 @@ type TAsFormFieldRepeaterProps = {
  */
 declare const AsFormFieldRepeater: ({ RepeaterComponent, addFieldName, removeFieldName, existingElements, initialElements, stateUpdater, formPrefix, RepeaterFooter, }: TAsFormFieldRepeaterProps) => ReactNode;
 
-/**
- * Represents the properties for the useForm hook, including an ID and event callback properties.
- *
- * @property {string} id - The unique identifier for the form. Deprecated, use 'index' instead
- * @property {string} index - The unique identifier for the form.
- *
- * @see {@link TEventsCallbackProps}
- * @interface
- */
-type TUseFormProps<T> = Pick<TFormEntry, 'index' | 'initialValues' | 'iVars' | 'stopEventsOnSubmit'> & TEventsCallbackProps<T> & OneOf<{
-    id: string;
-    index: string;
-}>;
-
-/**
- * Hook to register events callback functions
- */
-declare function useForm<T>({ id, index, onData, onSubmit, onFormMount, onValid, iVars, initialValues, stopEventsOnSubmit, ...rest }: TUseFormProps<T>, deps?: React.DependencyList): void;
-
-/**
- * Represents the properties for the useFormGroup hook, including a list of ID's and event callback properties.
- *
- * @property {string} ids - The unique identifier for the forms.
- * @property {payload: TFormGroupOnDataEventPayload<T>} onData - callback event occurring when a value is changing via input or logic.
- * @property {payload: TFormGroupOnValidEventPayload} onData - callback event occurring when validation status changes on the form.
- * @property {payload: TFormGroupOnSubmitEventPayload<T>} onData - event occurring when form submission is trigger.
- *
- */
-type TUseFormGroup<T> = {
-    ids: string[];
-    onData?: (payload: TFormGroupOnDataEventPayload<T>) => void;
-    onValid?: (payload: TFormGroupOnValidEventPayload) => void;
-    onSubmit?: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
-};
-
-declare function useFormGroup<T>({ ids, onData, onValid, onSubmit }: TUseFormGroup<T>, deps?: React.DependencyList): void;
-
 /**
  * Represents the context for managing forms within a form group.
  *
@@ -286,6 +249,72 @@ declare const FormGroupContextProvider: ({ children, mappers, debugMode, config,
  */
 declare const useFormGroupContext: (props?: TFormContextProvider) => TFormContext;
 
+/**
+ * Represents the props for a field wrapper component, including children.
+ *
+ * @property {Record<string, unknown>} [props] - Additional properties for the field.
+ * @property {TFormContext | null} [context] - The context of the form, which may be null.
+ * @property {React.ReactNode} children - The child elements of the component.
+ * @see {@link TFieldWrapper}
+ */
+type TFieldWrapperProps = PropsWithChildren<TFieldWrapper & {
+    props?: Record<string, unknown>;
+    context?: TFormContext | null;
+    mounted?: boolean;
+    mapper?: TMapper<ElementType>;
+    component?: string;
+    visibility?: boolean;
+}>;
+/**
+ * Represents the props for rendering a field wrapper component, including children.
+ *
+ * @property {Record<string, unknown>} props - Additional properties for the field.
+ * @property {FormField} [fieldInstance] - The instance of the form field, which may be undefined.
+ * @property {React.ReactNode} children - The child elements of the component.
+ */
+type TFieldWrapperComponentRenderProps = PropsWithChildren<{
+    props: Record<string, unknown>;
+    fieldInstance?: FormField;
+    mapper?: TMapper<ElementType>;
+}>;
+
+/**
+ * Represents the properties for the useForm hook, including an ID and event callback properties.
+ *
+ * @property {string} id - The unique identifier for the form. Deprecated, use 'index' instead
+ * @property {string} index - The unique identifier for the form.
+ *
+ * @see {@link TEventsCallbackProps}
+ * @interface
+ */
+type TUseFormProps<T> = Pick<TFormEntry, 'index' | 'initialValues' | 'iVars' | 'stopEventsOnSubmit'> & TEventsCallbackProps<T> & OneOf<{
+    id: string;
+    index: string;
+}>;
+
+/**
+ * Hook to register events callback functions
+ */
+declare function useForm<T>({ id, index, onData, onSubmit, onFormMount, onValid, iVars, initialValues, stopEventsOnSubmit, ...rest }: TUseFormProps<T>, deps?: React.DependencyList): void;
+
+/**
+ * Represents the properties for the useFormGroup hook, including a list of ID's and event callback properties.
+ *
+ * @property {string} ids - The unique identifier for the forms.
+ * @property {payload: TFormGroupOnDataEventPayload<T>} onData - callback event occurring when a value is changing via input or logic.
+ * @property {payload: TFormGroupOnValidEventPayload} onData - callback event occurring when validation status changes on the form.
+ * @property {payload: TFormGroupOnSubmitEventPayload<T>} onData - event occurring when form submission is trigger.
+ *
+ */
+type TUseFormGroup<T> = {
+    ids: string[];
+    onData?: (payload: TFormGroupOnDataEventPayload<T>) => void;
+    onValid?: (payload: TFormGroupOnValidEventPayload) => void;
+    onSubmit?: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
+};
+
+declare function useFormGroup<T>({ ids, onData, onValid, onSubmit }: TUseFormGroup<T>, deps?: React.DependencyList): void;
+
 declare const defaultChangeEvent: TValueChangeEvent;
 declare const checkedChangeEvent: TValueChangeEvent;
 declare const valueChangeEvent: TValueChangeEvent;
@@ -294,4 +323,4 @@ declare const datepickerChangeEvent: TValueChangeEvent;
 declare const dropdownChangeEvent: TValueChangeEvent;
 
 export { AsFormField, AsFormFieldBuilder, AsFormFieldRepeater, Form, FormGroupContext, FormGroupContextProvider, checkedChangeEvent, datepickerChangeEvent, defaultChangeEvent, dropdownChangeEvent, numberInputChangeEvent, useForm, useFormGroup, useFormGroupContext, valueChangeEvent };
-export type { TEventsCallbackProps, TFieldWrapper, TFormContext, TFormData };
+export type { TAsFormFieldBuilderProps, TAsFormFieldProps, TAsFormFieldRepeaterProps, TEventsCallbackProps, TFieldWrapper, TFieldWrapperComponentRenderProps, TFieldWrapperProps, TFormContext, TFormContextProvider, TFormData, TFormProps, TRepeaterFooterProps, TRepeaterProps };

package/index.esm.js

@@ -1,6 +1,6 @@
 'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useEffect, useState, useMemo, useCallback, Suspense } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useEffect, useMemo, useState, useCallback, Suspense } from 'react';
 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 : {};
@@ -2185,35 +2185,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const BuildSchemaAsFields = ({
-  components,
-  mappers,
-  formIndex,
-  mountedForm
-}) => {
-  return components && components.map(_a => {
-    var {
-        component
-      } = _a,
-      componentEl = __rest(_a, ["component"]);
-    const mapper = mappers === null || mappers === void 0 ? void 0 : mappers.find(el => el.componentName === component);
-    return mapper ? jsx(AsFormFieldBuilder, Object.assign({
-      formIndex: formIndex,
-      mapper: mapper,
-      formMounted: mountedForm
-    }, componentEl, {
-      children: componentEl.children && componentEl.children.length > 0 && jsx(BuildSchemaAsFields, {
-        formIndex: formIndex,
-        mappers: mappers,
-        components: componentEl.children,
-        mountedForm: mountedForm
-      })
-    }), componentEl.name) : jsx("div", {
-      children: `component mapper not found for ${component} from field name ${componentEl.name} on form ${formIndex}`
-    }, componentEl.name);
-  });
-};
-
 const FormGroupContext = /*#__PURE__*/createContext({});
 /**
  * context interface to be used isolated or with the context provider
@@ -2338,68 +2309,356 @@ const useFormGroupContext = props => {
   return context;
 };
 
-var NATIVE_BIND = functionBindNative;
-
-var FunctionPrototype = Function.prototype;
-var apply$2 = FunctionPrototype.apply;
-var call$2 = FunctionPrototype.call;
-
-// eslint-disable-next-line es/no-function-prototype-bind, es/no-reflect -- safe
-var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND ? call$2.bind(apply$2) : function () {
-  return call$2.apply(apply$2, arguments);
-});
-
-var defineProperty = objectDefineProperty.f;
-
-var proxyAccessor$1 = function (Target, Source, key) {
-  key in Target || defineProperty(Target, key, {
-    configurable: true,
-    get: function () { return Source[key]; },
-    set: function (it) { Source[key] = it; }
+/**
+ * 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 = (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
+  }));
+  if (Asynccomponent) return jsx(Suspense, {
+    children: jsx(Asynccomponent, Object.assign({}, props, {
+      children: children && children
+    }))
+  });
+  return jsx("div", {
+    children: `failed to render field ${fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.name} with componentName:${(_c = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _c === void 0 ? void 0 : _c.componentName}, please check mappers`
   });
 };
-
-var isCallable = isCallable$g;
-var isObject$1 = isObject$a;
-var setPrototypeOf$1 = objectSetPrototypeOf;
-
-// makes subclassing work correct for wrapped built-ins
-var inheritIfRequired$1 = function ($this, dummy, Wrapper) {
-  var NewTarget, NewTargetPrototype;
-  if (
-    // it can work only with native `setPrototypeOf`
-    setPrototypeOf$1 &&
-    // we haven't completely correct pre-ES6 way for getting `new.target`, so use this
-    isCallable(NewTarget = dummy.constructor) &&
-    NewTarget !== Wrapper &&
-    isObject$1(NewTargetPrototype = NewTarget.prototype) &&
-    NewTargetPrototype !== Wrapper.prototype
-  ) setPrototypeOf$1($this, NewTargetPrototype);
-  return $this;
-};
-
-var classof$2 = classof$4;
-
-var $String = String;
-
-var toString$2 = function (argument) {
-  if (classof$2(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
-  return $String(argument);
-};
-
-var toString$1 = toString$2;
-
-var normalizeStringArgument$1 = function (argument, $default) {
-  return argument === undefined ? arguments.length < 2 ? '' : $default : toString$1(argument);
+/**
+ * Base field Wrapper to render the component with the necessary configurations from the schema
+ * and mapper configuration
+ *
+ * @param {TFieldWrapperProps} param FieldWrapper params
+ * @returns {ReactElement}
+ */
+const FieldWrapper = ({
+  name,
+  formIndex,
+  children,
+  props,
+  context,
+  mounted,
+  mapper,
+  visibility,
+  component
+}) => {
+  var _a, _b, _c;
+  const localContext = useFormGroupContext({});
+  const fieldMapper = mapper || ((_a = localContext.mappers) === null || _a === void 0 ? void 0 : _a.find(mapper => mapper.componentName === component));
+  /**
+   * picks the right context prioritizing the context passed as prop
+   */
+  const {
+    formGroupInstance,
+    debugMode
+  } = useMemo(() => context ? context : localContext, [context, localContext]);
+  /**
+   * retrieves the field instance when it's mounted
+   */
+  const fieldInstance = useMemo(() => {
+    var _a;
+    return (_a = formGroupInstance.getForm({
+      key: formIndex
+    })) === null || _a === void 0 ? void 0 : _a.getField({
+      key: name
+    });
+  }, [mounted]);
+  /**
+   * props with templates stripped until the field ins't ready on the instance
+   */
+  const filteredProps = useMemo(() => {
+    return FormField.filterProps(props);
+  }, []);
+  /**
+   * sends props changed on the adapter for comparison to effectively change props for the instance
+   */
+  useEffect(() => {
+    if (fieldInstance && props) fieldInstance.adapterProps = props;
+  }, [props]);
+  const [valueState, setValueState] = useState((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue) || {
+    [((_b = fieldMapper === null || fieldMapper === void 0 ? void 0 : fieldMapper.events) === null || _b === void 0 ? void 0 : _b.setValue) || 'value']: ''
+  });
+  const [state, setState] = useState({
+    visibility: typeof visibility === 'boolean' ? visibility : true,
+    props: filteredProps
+  });
+  /**
+   * handles the mounting and unmounting logic onto the field instance
+   */
+  useEffect(() => {
+    if (!fieldInstance || (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mounted)) return;
+    fieldInstance.mountField({
+      valueSubscription: value => {
+        setValueState(value);
+      },
+      propsSubscription: ({
+        visibility,
+        props,
+        errors
+      }) => {
+        setState(prev => Object.assign(Object.assign({}, prev), {
+          visibility,
+          props,
+          errors
+        }));
+      }
+    });
+  }, [fieldInstance]);
+  /**
+   * recycle effect to remove the field Subscriptions due to memory leaks
+   */
+  useEffect(() => {
+    return () => {
+      (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mounted) && (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField());
+    };
+  }, []);
+  /**
+   * 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(() => {
+    const events = fieldMapper === null || fieldMapper === void 0 ? void 0 : fieldMapper.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;
+    if (events === null || events === void 0 ? void 0 : events.onFocus) props[events.onFocus] = () => handleEvent('ON_FIELD_FOCUS');
+    if (events === null || events === void 0 ? void 0 : events.onClick) props[events.onClick] = () => handleEvent('ON_FIELD_CLICK');
+    if (events === null || events === void 0 ? void 0 : events.onSubmit) props[events.onSubmit] = () => handleEvent('ON_FORM_SUBMIT');
+    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;
+  }, [mounted]);
+  return state.visibility ? jsxs(Fragment, {
+    children: [debugMode && jsxs("div", {
+      style: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: [jsxs("b", {
+        style: {
+          padding: '0px',
+          margin: '0px'
+        },
+        children: ["name:", name]
+      }), jsx("br", {}), jsx("hr", {})]
+    }), jsx(FieldWrapperComponentRender, {
+      props: Object.assign(Object.assign(Object.assign(Object.assign({}, mapProps), state.props), state.errors), valueState),
+      fieldInstance: fieldInstance,
+      mapper: fieldMapper,
+      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, {});
 };
 
-var isObject = isObject$a;
-var createNonEnumerableProperty$2 = createNonEnumerableProperty$8;
-
-// `InstallErrorCause` abstract operation
-// https://tc39.es/ecma262/#sec-installerrorcause
-var installErrorCause$1 = function (O, options) {
-  if (isObject(options) && 'cause' in options) {
+/**
+ * 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
+ *
+ * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
+ * @returns {ReactElement}
+ */
+const AsFormFieldBuilder = props => {
+  const context = useFormGroupContext({});
+  /**
+   * state to track the field instance creation process
+   */
+  const [mounted, setMounted] = useState(false);
+  const mountedRef = useRef(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, _b;
+    if (mountedRef.current) return;
+    if (typeof props.formMounted === 'undefined' && !((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) {
+      context.addFormWithIndex(props.formIndex);
+    }
+    if (props.formMounted || typeof props.formMounted === 'undefined') {
+      const fieldSchema = Object.assign(Object.assign({}, props), {
+        component: ((_b = props.mapper) === null || _b === void 0 ? void 0 : _b.componentName) || props.component,
+        //forcing 1 option with OneOf
+        children: undefined
+      });
+      const formInstance = context.formGroupInstance.forms.get(props.formIndex);
+      formInstance === null || formInstance === void 0 ? void 0 : formInstance.addField({
+        fieldSchema,
+        mapperElement: props.mapper
+      });
+      setMounted(true);
+      mountedRef.current = true;
+    }
+  }, [props.formMounted]);
+  /**
+   * recycle effect to remove the field from the form instance when the field leaves the vDOM
+   * and the subscriptions
+   */
+  useEffect(() => {
+    return () => {
+      var _a, _b;
+      if ((_b = (_a = context.getForm({
+        key: props.formIndex
+      })) === null || _a === void 0 ? void 0 : _a.getField({
+        key: props.name
+      })) === null || _b === void 0 ? void 0 : _b.mounted) context.formGroupInstance.removeField({
+        formIndex: props.formIndex,
+        fieldIndex: props.name
+      });
+    };
+  }, []);
+  /**
+   * allows to control field selected value on each event
+   */
+  useEffect(() => {
+    var _a;
+    if (!props.onSelected) return;
+    const callback = payload => {
+      if (props.onSelected) {
+        props.onSelected(payload);
+      }
+    };
+    const sub = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.subscribeFieldEvent({
+      callback
+    });
+    return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
+  }, [props.onSelected]);
+  return jsx(FieldWrapper, {
+    formIndex: props.formIndex,
+    name: props.name,
+    props: props.props,
+    context: !context.active ? context : null,
+    mounted: mounted,
+    mapper: props.mapper,
+    visibility: props.visibility,
+    component: props.component,
+    children: props.children && props.children
+  });
+};
+
+const BuildSchemaAsFields = ({
+  components,
+  mappers,
+  formIndex,
+  mountedForm
+}) => {
+  return components && components.map(_a => {
+    var {
+        component
+      } = _a,
+      componentEl = __rest(_a, ["component"]);
+    const mapper = mappers === null || mappers === void 0 ? void 0 : mappers.find(el => el.componentName === component);
+    return mapper ? jsx(AsFormFieldBuilder, Object.assign({
+      formIndex: formIndex,
+      mapper: mapper,
+      formMounted: mountedForm
+    }, componentEl, {
+      children: componentEl.children && componentEl.children.length > 0 && jsx(BuildSchemaAsFields, {
+        formIndex: formIndex,
+        mappers: mappers,
+        components: componentEl.children,
+        mountedForm: mountedForm
+      })
+    }), componentEl.name) : jsx("div", {
+      children: `component mapper not found for ${component} from field name ${componentEl.name} on form ${formIndex}`
+    }, componentEl.name);
+  });
+};
+
+var NATIVE_BIND = functionBindNative;
+
+var FunctionPrototype = Function.prototype;
+var apply$2 = FunctionPrototype.apply;
+var call$2 = FunctionPrototype.call;
+
+// eslint-disable-next-line es/no-function-prototype-bind, es/no-reflect -- safe
+var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND ? call$2.bind(apply$2) : function () {
+  return call$2.apply(apply$2, arguments);
+});
+
+var defineProperty = objectDefineProperty.f;
+
+var proxyAccessor$1 = function (Target, Source, key) {
+  key in Target || defineProperty(Target, key, {
+    configurable: true,
+    get: function () { return Source[key]; },
+    set: function (it) { Source[key] = it; }
+  });
+};
+
+var isCallable = isCallable$g;
+var isObject$1 = isObject$a;
+var setPrototypeOf$1 = objectSetPrototypeOf;
+
+// makes subclassing work correct for wrapped built-ins
+var inheritIfRequired$1 = function ($this, dummy, Wrapper) {
+  var NewTarget, NewTargetPrototype;
+  if (
+    // it can work only with native `setPrototypeOf`
+    setPrototypeOf$1 &&
+    // we haven't completely correct pre-ES6 way for getting `new.target`, so use this
+    isCallable(NewTarget = dummy.constructor) &&
+    NewTarget !== Wrapper &&
+    isObject$1(NewTargetPrototype = NewTarget.prototype) &&
+    NewTargetPrototype !== Wrapper.prototype
+  ) setPrototypeOf$1($this, NewTargetPrototype);
+  return $this;
+};
+
+var classof$2 = classof$4;
+
+var $String = String;
+
+var toString$2 = function (argument) {
+  if (classof$2(argument) === 'Symbol') throw new TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+var toString$1 = toString$2;
+
+var normalizeStringArgument$1 = function (argument, $default) {
+  return argument === undefined ? arguments.length < 2 ? '' : $default : toString$1(argument);
+};
+
+var isObject = isObject$a;
+var createNonEnumerableProperty$2 = createNonEnumerableProperty$8;
+
+// `InstallErrorCause` abstract operation
+// https://tc39.es/ecma262/#sec-installerrorcause
+var installErrorCause$1 = function (O, options) {
+  if (isObject(options) && 'cause' in options) {
     createNonEnumerableProperty$2(O, 'cause', options.cause);
   }
 };
@@ -3180,265 +3439,6 @@ const AsFormField = props => {
   return props.children;
 };
 
-/**
- * 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 = (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
-  }));
-  if (Asynccomponent) return jsx(Suspense, {
-    children: jsx(Asynccomponent, Object.assign({}, props, {
-      children: children && children
-    }))
-  });
-  return jsx("div", {
-    children: `failed to render field ${fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.name} with componentName:${(_c = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mapper) === null || _c === void 0 ? void 0 : _c.componentName}, please check mappers`
-  });
-};
-/**
- * Base field Wrapper to render the component with the necessary configurations from the schema
- * and mapper configuration
- *
- * @param {TFieldWrapperProps} param FieldWrapper params
- * @returns {ReactElement}
- */
-const FieldWrapper = ({
-  name,
-  formIndex,
-  children,
-  props,
-  context,
-  mounted,
-  mapper,
-  visibility,
-  component
-}) => {
-  var _a, _b, _c;
-  const localContext = useFormGroupContext({});
-  const fieldMapper = mapper || ((_a = localContext.mappers) === null || _a === void 0 ? void 0 : _a.find(mapper => mapper.componentName === component));
-  /**
-   * picks the right context prioritizing the context passed as prop
-   */
-  const {
-    formGroupInstance,
-    debugMode
-  } = useMemo(() => context ? context : localContext, [context, localContext]);
-  /**
-   * retrieves the field instance when it's mounted
-   */
-  const fieldInstance = useMemo(() => {
-    var _a;
-    return (_a = formGroupInstance.getForm({
-      key: formIndex
-    })) === null || _a === void 0 ? void 0 : _a.getField({
-      key: name
-    });
-  }, [mounted]);
-  /**
-   * props with templates stripped until the field ins't ready on the instance
-   */
-  const filteredProps = useMemo(() => {
-    return FormField.filterProps(props);
-  }, []);
-  /**
-   * sends props changed on the adapter for comparison to effectively change props for the instance
-   */
-  useEffect(() => {
-    if (fieldInstance && props) fieldInstance.adapterProps = props;
-  }, [props]);
-  const [valueState, setValueState] = useState((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue) || {
-    [((_b = fieldMapper === null || fieldMapper === void 0 ? void 0 : fieldMapper.events) === null || _b === void 0 ? void 0 : _b.setValue) || 'value']: ''
-  });
-  const [state, setState] = useState({
-    visibility: typeof visibility === 'boolean' ? visibility : true,
-    props: filteredProps
-  });
-  /**
-   * handles the mounting and unmounting logic onto the field instance
-   */
-  useEffect(() => {
-    if (!fieldInstance || (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mounted)) return;
-    fieldInstance.mountField({
-      valueSubscription: value => {
-        setValueState(value);
-      },
-      propsSubscription: ({
-        visibility,
-        props,
-        errors
-      }) => {
-        setState(prev => Object.assign(Object.assign({}, prev), {
-          visibility,
-          props,
-          errors
-        }));
-      }
-    });
-  }, [fieldInstance]);
-  /**
-   * recycle effect to remove the field Subscriptions due to memory leaks
-   */
-  useEffect(() => {
-    return () => {
-      (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.mounted) && (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.destroyField());
-    };
-  }, []);
-  /**
-   * 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(() => {
-    const events = fieldMapper === null || fieldMapper === void 0 ? void 0 : fieldMapper.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;
-    if (events === null || events === void 0 ? void 0 : events.onFocus) props[events.onFocus] = () => handleEvent('ON_FIELD_FOCUS');
-    if (events === null || events === void 0 ? void 0 : events.onClick) props[events.onClick] = () => handleEvent('ON_FIELD_CLICK');
-    if (events === null || events === void 0 ? void 0 : events.onSubmit) props[events.onSubmit] = () => handleEvent('ON_FORM_SUBMIT');
-    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;
-  }, [mounted]);
-  return state.visibility ? jsxs(Fragment, {
-    children: [debugMode && jsxs("div", {
-      style: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column'
-      },
-      children: [jsxs("b", {
-        style: {
-          padding: '0px',
-          margin: '0px'
-        },
-        children: ["name:", name]
-      }), jsx("br", {}), jsx("hr", {})]
-    }), jsx(FieldWrapperComponentRender, {
-      props: Object.assign(Object.assign(Object.assign(Object.assign({}, mapProps), state.props), state.errors), valueState),
-      fieldInstance: fieldInstance,
-      mapper: fieldMapper,
-      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, {});
-};
-
-/**
- * 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
- *
- * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
- * @returns {ReactElement}
- */
-const AsFormFieldBuilder = props => {
-  const context = useFormGroupContext({});
-  /**
-   * state to track the field instance creation process
-   */
-  const [mounted, setMounted] = useState(false);
-  const mountedRef = useRef(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, _b;
-    if (mountedRef.current) return;
-    if (typeof props.formMounted === 'undefined' && !((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) {
-      context.addFormWithIndex(props.formIndex);
-    }
-    if (props.formMounted || typeof props.formMounted === 'undefined') {
-      const fieldSchema = Object.assign(Object.assign({}, props), {
-        component: ((_b = props.mapper) === null || _b === void 0 ? void 0 : _b.componentName) || props.component,
-        //forcing 1 option with OneOf
-        children: undefined
-      });
-      const formInstance = context.formGroupInstance.forms.get(props.formIndex);
-      formInstance === null || formInstance === void 0 ? void 0 : formInstance.addField({
-        fieldSchema,
-        mapperElement: props.mapper
-      });
-      setMounted(true);
-      mountedRef.current = true;
-    }
-  }, [props.formMounted]);
-  /**
-   * recycle effect to remove the field from the form instance when the field leaves the vDOM
-   * and the subscriptions
-   */
-  useEffect(() => {
-    return () => {
-      var _a, _b;
-      if ((_b = (_a = context.getForm({
-        key: props.formIndex
-      })) === null || _a === void 0 ? void 0 : _a.getField({
-        key: props.name
-      })) === null || _b === void 0 ? void 0 : _b.mounted) context.formGroupInstance.removeField({
-        formIndex: props.formIndex,
-        fieldIndex: props.name
-      });
-    };
-  }, []);
-  /**
-   * allows to control field selected value on each event
-   */
-  useEffect(() => {
-    var _a;
-    if (!props.onSelected) return;
-    const callback = payload => {
-      if (props.onSelected) {
-        props.onSelected(payload);
-      }
-    };
-    const sub = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.subscribeFieldEvent({
-      callback
-    });
-    return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
-  }, [props.onSelected]);
-  return jsx(FieldWrapper, {
-    formIndex: props.formIndex,
-    name: props.name,
-    props: props.props,
-    context: !context.active ? context : null,
-    mounted: mounted,
-    mapper: props.mapper,
-    visibility: props.visibility,
-    component: props.component,
-    children: props.children && props.children
-  });
-};
-
 var classof$1 = classofRaw$2;
 
 // `IsArray` abstract operation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "A react adapter for bolttech form engine",
   "dependencies": {
     "@bolttech/form-engine-core": "1.0.5"