@dnb/eufemia 10.49.0 → 10.51.0

package/extensions/forms/DataContext/At/At.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useContext } from 'react';
-import pointer from 'json-pointer';
+import pointer from '../../utils/json-pointer';
 import Context from '../Context';
 function At(props) {
   const {

package/extensions/forms/DataContext/At/At.js.map

@@ -1 +1 @@
-{"version":3,"file":"At.js","names":["React","useCallback","useContext","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","handlePathChangeDataContext","has","get","undefined","changePath","value","Array","isArray","createElement","Fragment","map","element","i","Provider","key","_objectSpread","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/DataContext/At/At.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport pointer from 'json-pointer'\nimport type { ComponentProps } from '../../types'\nimport Context, { ContextState } from '../Context'\n\nexport type Props = ComponentProps & {\n  /** JSON Pointer for where in the source dataset to point at in sub components */\n  path?: string\n  iterate?: boolean\n  children?: React.ReactNode\n}\n\nfunction At(props: Props) {\n  const { path = '/', iterate, children } = props\n  const dataContext = useContext(Context)\n  const {\n    data: contextData,\n    handlePathChange: handlePathChangeDataContext,\n  } = dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange: ContextState['handlePathChange'] = useCallback(\n    (changePath, value) => {\n      handlePathChangeDataContext(`${path}${changePath}`, value)\n    },\n    [handlePathChangeDataContext, path]\n  )\n\n  if (iterate) {\n    if (!Array.isArray(data)) {\n      return null\n    }\n    return (\n      <>\n        {data.map((element, i) => {\n          const handlePathChange = (\n            handlePathChangeDataContext\n              ? (changePath, value) => {\n                  handlePathChangeDataContext(\n                    `${path}/${i}${changePath}`,\n                    value\n                  )\n                }\n              : undefined\n          ) as ContextState['handlePathChange']\n\n          return (\n            <Context.Provider\n              key={`element${i}`}\n              value={{\n                ...dataContext,\n                data: element,\n                handlePathChange,\n              }}\n            >\n              {children}\n            </Context.Provider>\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        ...dataContext,\n        data,\n        handlePathChange,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nAt._supportsSpacingProps = true\nexport default At\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,OAAO,MAAM,cAAc;AAElC,OAAOC,OAAO,MAAwB,YAAY;AASlD,SAASC,EAAEA,CAACC,KAAY,EAAE;EACxB,MAAM;IAAEC,IAAI,GAAG,GAAG;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC/C,MAAMI,WAAW,GAAGR,UAAU,CAACE,OAAO,CAAC;EACvC,MAAM;IACJO,IAAI,EAAEC,WAAW;IACjBC,gBAAgB,EAAEC;EACpB,CAAC,GAAGJ,WAAW;EAEf,MAAMC,IAAI,GACRC,WAAW,IAAIT,OAAO,CAACY,GAAG,CAACH,WAAW,EAAEL,IAAI,CAAC,GACzCJ,OAAO,CAACa,GAAG,CAACJ,WAAW,EAAEL,IAAI,CAAC,GAC9BU,SAAS;EAEf,MAAMJ,gBAAkD,GAAGZ,WAAW,CACpE,CAACiB,UAAU,EAAEC,KAAK,KAAK;IACrBL,2BAA2B,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EAC5D,CAAC,EACD,CAACL,2BAA2B,EAAEP,IAAI,CACpC,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,IAAI,CAACY,KAAK,CAACC,OAAO,CAACV,IAAI,CAAC,EAAE;MACxB,OAAO,IAAI;IACb;IACA,OACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACGZ,IAAI,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAK;MACxB,MAAMb,gBAAgB,GACpBC,2BAA2B,GACvB,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,2BAA2B,CACxB,GAAEP,IAAK,IAAGmB,CAAE,GAAER,UAAW,EAAC,EAC3BC,KACF,CAAC;MACH,CAAC,GACDF,SAC+B;MAErC,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;QACfC,GAAG,EAAG,UAASF,CAAE,EAAE;QACnBP,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;UACdC,IAAI,EAAEc,OAAO;UACbZ;QAAgB;MAChB,GAEDJ,QACe,CAAC;IAEvB,CAAC,CACD,CAAC;EAEP;EAEA,OACET,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;IACfR,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;MACdC,IAAI;MACJE;IAAgB;EAChB,GAEDJ,QACe,CAAC;AAEvB;AAEAJ,EAAE,CAACyB,qBAAqB,GAAG,IAAI;AAC/B,eAAezB,EAAE"}
+{"version":3,"file":"At.js","names":["React","useCallback","useContext","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","handlePathChangeDataContext","has","get","undefined","changePath","value","Array","isArray","createElement","Fragment","map","element","i","Provider","key","_objectSpread","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/DataContext/At/At.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport pointer from '../../utils/json-pointer'\nimport type { ComponentProps } from '../../types'\nimport Context, { ContextState } from '../Context'\n\nexport type Props = ComponentProps & {\n  /** JSON Pointer for where in the source dataset to point at in sub components */\n  path?: string\n  iterate?: boolean\n  children?: React.ReactNode\n}\n\nfunction At(props: Props) {\n  const { path = '/', iterate, children } = props\n  const dataContext = useContext(Context)\n  const {\n    data: contextData,\n    handlePathChange: handlePathChangeDataContext,\n  } = dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange: ContextState['handlePathChange'] = useCallback(\n    (changePath, value) => {\n      handlePathChangeDataContext(`${path}${changePath}`, value)\n    },\n    [handlePathChangeDataContext, path]\n  )\n\n  if (iterate) {\n    if (!Array.isArray(data)) {\n      return null\n    }\n    return (\n      <>\n        {data.map((element, i) => {\n          const handlePathChange = (\n            handlePathChangeDataContext\n              ? (changePath, value) => {\n                  handlePathChangeDataContext(\n                    `${path}/${i}${changePath}`,\n                    value\n                  )\n                }\n              : undefined\n          ) as ContextState['handlePathChange']\n\n          return (\n            <Context.Provider\n              key={`element${i}`}\n              value={{\n                ...dataContext,\n                data: element,\n                handlePathChange,\n              }}\n            >\n              {children}\n            </Context.Provider>\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        ...dataContext,\n        data,\n        handlePathChange,\n      }}\n    >\n      {children}\n    </Context.Provider>\n  )\n}\n\nAt._supportsSpacingProps = true\nexport default At\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,OAAO,MAAM,0BAA0B;AAE9C,OAAOC,OAAO,MAAwB,YAAY;AASlD,SAASC,EAAEA,CAACC,KAAY,EAAE;EACxB,MAAM;IAAEC,IAAI,GAAG,GAAG;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAC/C,MAAMI,WAAW,GAAGR,UAAU,CAACE,OAAO,CAAC;EACvC,MAAM;IACJO,IAAI,EAAEC,WAAW;IACjBC,gBAAgB,EAAEC;EACpB,CAAC,GAAGJ,WAAW;EAEf,MAAMC,IAAI,GACRC,WAAW,IAAIT,OAAO,CAACY,GAAG,CAACH,WAAW,EAAEL,IAAI,CAAC,GACzCJ,OAAO,CAACa,GAAG,CAACJ,WAAW,EAAEL,IAAI,CAAC,GAC9BU,SAAS;EAEf,MAAMJ,gBAAkD,GAAGZ,WAAW,CACpE,CAACiB,UAAU,EAAEC,KAAK,KAAK;IACrBL,2BAA2B,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EAC5D,CAAC,EACD,CAACL,2BAA2B,EAAEP,IAAI,CACpC,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,IAAI,CAACY,KAAK,CAACC,OAAO,CAACV,IAAI,CAAC,EAAE;MACxB,OAAO,IAAI;IACb;IACA,OACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QACGZ,IAAI,CAACa,GAAG,CAAC,CAACC,OAAO,EAAEC,CAAC,KAAK;MACxB,MAAMb,gBAAgB,GACpBC,2BAA2B,GACvB,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,2BAA2B,CACxB,GAAEP,IAAK,IAAGmB,CAAE,GAAER,UAAW,EAAC,EAC3BC,KACF,CAAC;MACH,CAAC,GACDF,SAC+B;MAErC,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;QACfC,GAAG,EAAG,UAASF,CAAE,EAAE;QACnBP,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;UACdC,IAAI,EAAEc,OAAO;UACbZ;QAAgB;MAChB,GAEDJ,QACe,CAAC;IAEvB,CAAC,CACD,CAAC;EAEP;EAEA,OACET,KAAA,CAAAsB,aAAA,CAAClB,OAAO,CAACuB,QAAQ;IACfR,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAnB,WAAW;MACdC,IAAI;MACJE;IAAgB;EAChB,GAEDJ,QACe,CAAC;AAEvB;AAEAJ,EAAE,CAACyB,qBAAqB,GAAG,IAAI;AAC/B,eAAezB,EAAE"}

package/extensions/forms/DataContext/Context.d.ts

@@ -1,20 +1,26 @@
 import React from 'react';
 import { Ajv } from '../utils/ajv';
-import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths, SubmitState, Path, EventStateObject, EventReturnWithStateObject, Identifier, FieldProps, FormError, ValueProps, OnChange } from '../types';
+import { AllJSONSchemaVersions, CustomErrorMessagesWithPaths, SubmitState, Path, EventStateObject, EventReturnWithStateObject, Identifier, FieldProps, FormError, ValueProps, OnChange, OnSubmitParams } from '../types';
 import { Props as ProviderProps } from './Provider';
-type HandleSubmitProps = {
-    formElement?: HTMLFormElement;
-};
-export type MountOptions = {
+export type MountState = {
+    isPreMounted?: boolean;
     isMounted?: boolean;
+    isVisible?: boolean;
+    wasStepChange?: boolean;
 };
 export type EventListenerCall = {
     path?: Path;
-    type?: 'onSubmit' | 'onPathChange';
+    type?: 'onSubmit' | 'onPathChange' | 'onMount';
     callback: (params?: {
         value: unknown;
     }) => void | Promise<void | Error>;
 };
+export type VisibleDataHandler<Data> = (data?: Data, options?: VisibleDataOptions) => Partial<Data>;
+export type VisibleDataOptions = {
+    keepPaths?: Array<Path>;
+    removePaths?: Array<Path>;
+};
+export type MutateDataHandler<Data> = (data: Data, mutate: TransformData) => Partial<Data>;
 export type FilterDataHandler<Data> = (data: Data, filter: FilterData) => Partial<Data>;
 export type FilterDataHandlerCallback<R> = (parameters: FilterDataHandlerParameters) => R;
 export type FilterDataHandlerParameters = FilterDataPathConditionParameters & {
@@ -31,10 +37,14 @@ export type FilterDataPathConditionParameters<Data = unknown> = {
 };
 export type FilterDataPathObject<Data> = Record<Path, FilterDataPathCondition<Data> | boolean | undefined>;
 export type FilterData<Data = unknown> = FilterDataPathObject<Data> | FilterDataHandlerCallback<boolean | undefined>;
+export type VisibleData<Data = unknown> = Partial<Data>;
 export type TransformData = FilterDataHandlerCallback<unknown>;
 export type HandleSubmitCallback = ({ preventSubmit, }: {
     preventSubmit: () => void;
 }) => void;
+export type FieldConnections = {
+    setEventResult?: (status: EventStateObject) => void;
+};
 export interface ContextState {
     id?: Identifier;
     hasContext: boolean;
@@ -47,13 +57,16 @@ export interface ContextState {
     autoComplete?: boolean;
     handlePathChange: (path: Path, value?: any) => EventReturnWithStateObject | unknown | Promise<EventReturnWithStateObject | unknown>;
     handlePathChangeUnvalidated: (path: Path, value: any) => void;
-    updateDataValue: (path: Path, value: any) => void;
+    updateDataValue: (path: Path, value: any, options?: {
+        preventUpdate?: boolean;
+    }) => void;
     setData: (data: any) => void;
     clearData?: () => void;
-    mutateDataHandler?: (data: any, mutate: TransformData) => any;
-    filterDataHandler?: (data: any, filter: FilterData) => any;
+    mutateDataHandler?: MutateDataHandler<unknown>;
+    filterDataHandler?: FilterDataHandler<unknown>;
+    visibleDataHandler?: VisibleDataHandler<unknown>;
     validateData: () => void;
-    handleSubmit: (props?: HandleSubmitProps) => any;
+    handleSubmit: () => Promise<EventStateObject | undefined>;
     scrollToTop: () => void;
     setShowAllErrors: (showAllErrors: boolean) => void;
     hasErrors: () => boolean;
@@ -61,8 +74,10 @@ export interface ContextState {
     hasFieldError: (path: Path) => boolean;
     setFieldState: (path: Path, fieldState: SubmitState) => void;
     setFieldError: (path: Path, error: Error | FormError) => void;
-    setMountedFieldState: (path: Path, options: MountOptions) => void;
-    setFormState?: (state: SubmitState) => void;
+    setMountedFieldState: (path: Path, options: MountState) => void;
+    setFormState?: (state: SubmitState, options?: {
+        keepPending?: boolean;
+    }) => void;
     setSubmitState?: (state: EventStateObject) => void;
     addOnChangeHandler?: (callback: OnChange) => void;
     handleSubmitCall: ({ onSubmit, enableAsyncBehavior, skipFieldValidation, skipErrorCheck, }: {
@@ -70,15 +85,22 @@ export interface ContextState {
         enableAsyncBehavior: boolean;
         skipFieldValidation?: boolean;
         skipErrorCheck?: boolean;
-    }) => void;
+    }) => Promise<EventStateObject | undefined>;
+    getSubmitData?: () => unknown;
+    getSubmitOptions?: () => OnSubmitParams;
     setFieldEventListener?: (path: EventListenerCall['path'], type: EventListenerCall['type'], callback: EventListenerCall['callback']) => void;
     setVisibleError?: (path: Path, hasError: boolean) => void;
     setFieldProps?: (path: Path, props: unknown) => void;
     setValueProps?: (path: Path, props: unknown) => void;
-    setHandleSubmit?: (callback: HandleSubmitCallback) => void;
+    setHandleSubmit?: (callback: HandleSubmitCallback, params?: {
+        remove?: boolean;
+    }) => void;
+    setFieldConnection?: (path: Path, connections: FieldConnections) => void;
     fieldPropsRef?: React.MutableRefObject<Record<string, FieldProps>>;
     valuePropsRef?: React.MutableRefObject<Record<string, ValueProps>>;
-    mountedFieldsRef?: React.MutableRefObject<Record<Path, MountOptions>>;
+    fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>;
+    mountedFieldsRef?: React.MutableRefObject<Record<Path, MountState>>;
+    formElementRef?: React.MutableRefObject<HTMLFormElement>;
     showAllErrors: boolean;
     hasVisibleError: boolean;
     formState: SubmitState;

package/extensions/forms/DataContext/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","validateData","handleSubmit","scrollToTop","showAllErrors","hasVisibleError","formState","setFormState","setSubmitState","handleSubmitCall","setShowAllErrors","setMountedFieldState","hasErrors","hasFieldState","hasFieldError","setFieldState","setFieldError","ajvInstance","contextErrorMessages","isInsideFormElement","props","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n  SubmitState,\n  Path,\n  EventStateObject,\n  EventReturnWithStateObject,\n  Identifier,\n  FieldProps,\n  FormError,\n  ValueProps,\n  OnChange,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport type MountOptions = {\n  isMounted?: boolean\n}\n\nexport type EventListenerCall = {\n  path?: Path\n  type?: 'onSubmit' | 'onPathChange'\n  callback: (params?: { value: unknown }) => void | Promise<void | Error>\n}\n\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterDataHandlerCallback<R> = (\n  parameters: FilterDataHandlerParameters\n) => R\nexport type FilterDataHandlerParameters =\n  FilterDataPathConditionParameters & {\n    path: Path\n  }\nexport type FilterDataPathCondition<Data = unknown> = (\n  parameters: FilterDataPathConditionParameters<Data>\n) => boolean | undefined\nexport type FilterDataPathConditionParameters<Data = unknown> = {\n  value: unknown\n  props: FieldProps\n  data: Data\n  internal: {\n    error: Error | undefined\n  }\n}\nexport type FilterDataPathObject<Data> = Record<\n  Path,\n  FilterDataPathCondition<Data> | boolean | undefined\n>\nexport type FilterData<Data = unknown> =\n  | FilterDataPathObject<Data>\n  | FilterDataHandlerCallback<boolean | undefined>\nexport type TransformData = FilterDataHandlerCallback<unknown>\nexport type HandleSubmitCallback = ({\n  preventSubmit,\n}: {\n  preventSubmit: () => void\n}) => void\n\nexport interface ContextState {\n  id?: Identifier\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: any\n  internalDataRef?: React.MutableRefObject<any>\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (\n    path: Path,\n    value?: any\n  ) =>\n    | EventReturnWithStateObject\n    | unknown\n    | Promise<EventReturnWithStateObject | unknown>\n  handlePathChangeUnvalidated: (path: Path, value: any) => void\n  updateDataValue: (path: Path, value: any) => void\n  setData: (data: any) => void\n  clearData?: () => void\n  mutateDataHandler?: (data: any, mutate: TransformData) => any\n  filterDataHandler?: (data: any, filter: FilterData) => any\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  hasFieldError: (path: Path) => boolean\n  setFieldState: (path: Path, fieldState: SubmitState) => void\n  setFieldError: (path: Path, error: Error | FormError) => void\n  setMountedFieldState: (path: Path, options: MountOptions) => void\n  setFormState?: (state: SubmitState) => void\n  setSubmitState?: (state: EventStateObject) => void\n  addOnChangeHandler?: (callback: OnChange) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehavior,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehavior: boolean\n    skipFieldValidation?: boolean\n    skipErrorCheck?: boolean\n  }) => void\n  setFieldEventListener?: (\n    path: EventListenerCall['path'],\n    type: EventListenerCall['type'],\n    callback: EventListenerCall['callback']\n  ) => void\n  setVisibleError?: (path: Path, hasError: boolean) => void\n  setFieldProps?: (path: Path, props: unknown) => void\n  setValueProps?: (path: Path, props: unknown) => void\n  setHandleSubmit?: (callback: HandleSubmitCallback) => void\n  fieldPropsRef?: React.MutableRefObject<Record<string, FieldProps>>\n  valuePropsRef?: React.MutableRefObject<Record<string, ValueProps>>\n  mountedFieldsRef?: React.MutableRefObject<Record<Path, MountOptions>>\n  showAllErrors: boolean\n  hasVisibleError: boolean\n  formState: SubmitState\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  path?: Path\n  disabled?: boolean\n  required?: boolean\n  submitState: Partial<EventStateObject>\n  isInsideFormElement?: boolean\n  prerenderFieldProps?: boolean\n  props: ProviderProps<unknown>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  hasVisibleError: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  setMountedFieldState: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  hasFieldError: () => false,\n  setFieldState: () => null,\n  setFieldError: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  isInsideFormElement: false,\n  props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAcC,eAAe,QAAQ,cAAc;AA+InD,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,WAAW,EAAEF,SAAS;EACtBG,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,eAAe,EAAE,KAAK;EACtBC,SAAS,EAAEZ,SAAS;EACpBa,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,WAAW,EAAE3B,eAAe,CAAC,CAAC;EAC9B4B,oBAAoB,EAAExB,SAAS;EAC/ByB,mBAAmB,EAAE,KAAK;EAC1BC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAGhC,KAAK,CAACiC,aAAa,CAAe/B,mBAAmB,CAAC;AAEtE,eAAe8B,OAAO"}
+{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","validateData","handleSubmit","scrollToTop","showAllErrors","hasVisibleError","formState","setFormState","setSubmitState","handleSubmitCall","setShowAllErrors","setMountedFieldState","hasErrors","hasFieldState","hasFieldError","setFieldState","setFieldError","ajvInstance","contextErrorMessages","isInsideFormElement","props","Context","createContext"],"sources":["../../../../../src/extensions/forms/DataContext/Context.ts"],"sourcesContent":["import React from 'react'\nimport { Ajv, makeAjvInstance } from '../utils/ajv'\nimport {\n  AllJSONSchemaVersions,\n  CustomErrorMessagesWithPaths,\n  SubmitState,\n  Path,\n  EventStateObject,\n  EventReturnWithStateObject,\n  Identifier,\n  FieldProps,\n  FormError,\n  ValueProps,\n  OnChange,\n  OnSubmitParams,\n} from '../types'\nimport { Props as ProviderProps } from './Provider'\n\nexport type MountState = {\n  isPreMounted?: boolean\n  isMounted?: boolean\n  isVisible?: boolean\n  wasStepChange?: boolean\n}\n\nexport type EventListenerCall = {\n  path?: Path\n  type?: 'onSubmit' | 'onPathChange' | 'onMount'\n  callback: (params?: { value: unknown }) => void | Promise<void | Error>\n}\n\nexport type VisibleDataHandler<Data> = (\n  data?: Data,\n  options?: VisibleDataOptions\n) => Partial<Data>\nexport type VisibleDataOptions = {\n  keepPaths?: Array<Path>\n  removePaths?: Array<Path>\n}\nexport type MutateDataHandler<Data> = (\n  data: Data,\n  mutate: TransformData\n) => Partial<Data>\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterDataHandlerCallback<R> = (\n  parameters: FilterDataHandlerParameters\n) => R\nexport type FilterDataHandlerParameters =\n  FilterDataPathConditionParameters & {\n    path: Path\n  }\nexport type FilterDataPathCondition<Data = unknown> = (\n  parameters: FilterDataPathConditionParameters<Data>\n) => boolean | undefined\nexport type FilterDataPathConditionParameters<Data = unknown> = {\n  value: unknown\n  props: FieldProps\n  data: Data\n  internal: {\n    error: Error | undefined\n  }\n}\nexport type FilterDataPathObject<Data> = Record<\n  Path,\n  FilterDataPathCondition<Data> | boolean | undefined\n>\nexport type FilterData<Data = unknown> =\n  | FilterDataPathObject<Data>\n  | FilterDataHandlerCallback<boolean | undefined>\nexport type VisibleData<Data = unknown> = Partial<Data>\nexport type TransformData = FilterDataHandlerCallback<unknown>\nexport type HandleSubmitCallback = ({\n  preventSubmit,\n}: {\n  preventSubmit: () => void\n}) => void\nexport type FieldConnections = {\n  setEventResult?: (status: EventStateObject) => void\n}\n\nexport interface ContextState {\n  id?: Identifier\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: any\n  internalDataRef?: React.MutableRefObject<any>\n  /** Should the form validate data before submitting? */\n  errors?: Record<string, Error>\n  /** Will set autoComplete=\"on\" on each nested Field.String and Field.Number */\n  autoComplete?: boolean\n  handlePathChange: (\n    path: Path,\n    value?: any\n  ) =>\n    | EventReturnWithStateObject\n    | unknown\n    | Promise<EventReturnWithStateObject | unknown>\n  handlePathChangeUnvalidated: (path: Path, value: any) => void\n  updateDataValue: (\n    path: Path,\n    value: any,\n    options?: { preventUpdate?: boolean }\n  ) => void\n  setData: (data: any) => void\n  clearData?: () => void\n  mutateDataHandler?: MutateDataHandler<unknown>\n  filterDataHandler?: FilterDataHandler<unknown>\n  visibleDataHandler?: VisibleDataHandler<unknown>\n  validateData: () => void\n  handleSubmit: () => Promise<EventStateObject | undefined>\n  scrollToTop: () => void\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  hasFieldError: (path: Path) => boolean\n  setFieldState: (path: Path, fieldState: SubmitState) => void\n  setFieldError: (path: Path, error: Error | FormError) => void\n  setMountedFieldState: (path: Path, options: MountState) => void\n  setFormState?: (\n    state: SubmitState,\n    options?: { keepPending?: boolean }\n  ) => void\n  setSubmitState?: (state: EventStateObject) => void\n  addOnChangeHandler?: (callback: OnChange) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehavior,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehavior: boolean\n    skipFieldValidation?: boolean\n    skipErrorCheck?: boolean\n  }) => Promise<EventStateObject | undefined>\n  getSubmitData?: () => unknown\n  getSubmitOptions?: () => OnSubmitParams\n  setFieldEventListener?: (\n    path: EventListenerCall['path'],\n    type: EventListenerCall['type'],\n    callback: EventListenerCall['callback']\n  ) => void\n  setVisibleError?: (path: Path, hasError: boolean) => void\n  setFieldProps?: (path: Path, props: unknown) => void\n  setValueProps?: (path: Path, props: unknown) => void\n  setHandleSubmit?: (\n    callback: HandleSubmitCallback,\n    params?: { remove?: boolean }\n  ) => void\n  setFieldConnection?: (path: Path, connections: FieldConnections) => void\n  fieldPropsRef?: React.MutableRefObject<Record<string, FieldProps>>\n  valuePropsRef?: React.MutableRefObject<Record<string, ValueProps>>\n  fieldConnectionsRef?: React.RefObject<Record<Path, FieldConnections>>\n  mountedFieldsRef?: React.MutableRefObject<Record<Path, MountState>>\n  formElementRef?: React.MutableRefObject<HTMLFormElement>\n  showAllErrors: boolean\n  hasVisibleError: boolean\n  formState: SubmitState\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  path?: Path\n  disabled?: boolean\n  required?: boolean\n  submitState: Partial<EventStateObject>\n  isInsideFormElement?: boolean\n  prerenderFieldProps?: boolean\n  props: ProviderProps<unknown>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  hasVisibleError: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  setMountedFieldState: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  hasFieldError: () => false,\n  setFieldState: () => null,\n  setFieldError: () => null,\n  ajvInstance: makeAjvInstance(),\n  contextErrorMessages: undefined,\n  isInsideFormElement: false,\n  props: null,\n}\n\nconst Context = React.createContext<ContextState>(defaultContextState)\n\nexport default Context\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAcC,eAAe,QAAQ,cAAc;AA+KnD,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,WAAW,EAAEF,SAAS;EACtBG,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,eAAe,EAAE,KAAK;EACtBC,SAAS,EAAEZ,SAAS;EACpBa,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,WAAW,EAAE3B,eAAe,CAAC,CAAC;EAC9B4B,oBAAoB,EAAExB,SAAS;EAC/ByB,mBAAmB,EAAE,KAAK;EAC1BC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAGhC,KAAK,CAACiC,aAAa,CAAe/B,mBAAmB,CAAC;AAEtE,eAAe8B,OAAO"}

package/extensions/forms/DataContext/Provider/Provider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { JsonObject } from 'json-pointer';
+import { JsonObject } from '../../utils/json-pointer';
 import { Ajv } from '../../utils/ajv';
 import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, Path, OnSubmit, OnChange, EventReturnWithStateObject } from '../../types';
 import type { IsolationProviderProps } from '../../Form/Isolation/Isolation';

package/extensions/forms/DataContext/Provider/Provider.js

@@ -6,10 +6,10 @@ const _excluded = ["id", "globalStatusId", "defaultData", "emptyData", "data", "
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef, useMemo, useCallback, useReducer, useEffect, useContext } from 'react';
-import pointer from 'json-pointer';
+import pointer from '../../utils/json-pointer';
 import { makeAjvInstance, ajvErrorsToFormErrors } from '../../utils/ajv';
 import { debounce } from '../../../../shared/helpers';
-import FieldPropsProvider from '../../Form/FieldProps';
+import FieldPropsProvider from '../../Field/Provider';
 import useUpdateEffect from '../../../../shared/helpers/useUpdateEffect';
 import { isAsync } from '../../../../shared/helpers/isAsync';
 import { useSharedState } from '../../../../shared/helpers/useSharedState';
@@ -60,6 +60,7 @@ export default function Provider(props) {
   if (hasContext && !isolate) {
     throw new Error('DataContext (Form.Handler) can not be nested');
   }
+  const formElementRef = useRef(null);
   const translation = useTranslation().Field;
   const ajvRef = useRef(makeAjvInstance(ajvInstance));
   const mountedFieldsRef = useRef({});
@@ -80,11 +81,16 @@ export default function Provider(props) {
   }, []);
   const submitStateRef = useRef({});
   const setSubmitState = useCallback(state => {
-    Object.assign(submitStateRef.current, state);
+    submitStateRef.current = _objectSpread(_objectSpread({}, submitStateRef.current), state);
     forceUpdate();
   }, []);
   const formStateRef = useRef();
-  const setFormState = useCallback(formState => {
+  const keepPending = useRef(false);
+  const setFormState = useCallback(function (formState) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (typeof (options === null || options === void 0 ? void 0 : options.keepPending) === 'boolean') {
+      keepPending.current = options === null || options === void 0 ? void 0 : options.keepPending;
+    }
     formStateRef.current = formState;
     forceUpdate();
   }, []);
@@ -126,7 +132,8 @@ export default function Provider(props) {
   }, []);
   const hasFieldState = useCallback(state => {
     for (const path in mountedFieldsRef.current) {
-      if (checkFieldStateFor(path, state)) {
+      const item = mountedFieldsRef.current[path];
+      if (item.isMounted && checkFieldStateFor(path, state)) {
         return true;
       }
     }
@@ -134,7 +141,8 @@ export default function Provider(props) {
   }, [checkFieldStateFor]);
   const hasFieldError = useCallback(path => {
     for (const p in mountedFieldsRef.current) {
-      if (p === path && checkFieldStateFor(path, 'error')) {
+      const item = mountedFieldsRef.current[path];
+      if (item.isMounted && p === path && checkFieldStateFor(path, 'error')) {
         return true;
       }
     }
@@ -247,6 +255,28 @@ export default function Provider(props) {
     }
     return data;
   }, []);
+  const visibleDataHandler = useCallback(function () {
+    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : internalDataRef.current;
+    let {
+      keepPaths,
+      removePaths
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const visibleData = {};
+    for (const path in mountedFieldsRef.current) {
+      const item = mountedFieldsRef.current[path];
+      if (item && item.isVisible !== false && (item.isPreMounted !== false || item.wasStepChange === true) && (removePaths ? !removePaths.includes(path) : true) && pointer.has(data, path)) {
+        pointer.set(visibleData, path, pointer.get(data, path));
+      }
+    }
+    if (keepPaths) {
+      keepPaths.forEach(path => {
+        if (pointer.has(data, path)) {
+          pointer.set(visibleData, path, pointer.get(data, path));
+        }
+      });
+    }
+    return visibleData;
+  }, []);
   const filterDataHandler = useCallback((data, filter) => {
     if (filter) {
       return mutateDataHandler(data, filter, true);
@@ -257,11 +287,15 @@ export default function Provider(props) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : internalDataRef.current;
     return filterDataHandler(data, filter);
   }, [filterDataHandler]);
+  const fieldConnectionsRef = useRef({});
+  const setFieldConnection = useCallback((path, connections) => {
+    fieldConnectionsRef.current[path] = connections;
+  }, []);
   const fieldPropsRef = useRef({});
-  const valuePropsRef = useRef({});
   const setFieldProps = useCallback((path, props) => {
     fieldPropsRef.current[path] = props;
   }, []);
+  const valuePropsRef = useRef({});
   const setValueProps = useCallback((path, props) => {
     valuePropsRef.current[path] = props;
   }, []);
@@ -293,13 +327,13 @@ export default function Provider(props) {
     if (id && initialData && !sharedData.data) {
       sharedData.update(initialData);
     }
-    if (id && initialData && sharedData.data && cacheRef.current.shared === sharedData.data && internalDataRef.current === initialData) {
+    if (id && initialData && sharedData.data && cacheRef.current.shared === sharedData.data && internalDataRef.current === initialData && typeof internalDataRef.current === 'object') {
       return _objectSpread(_objectSpread({}, internalDataRef.current), sharedData.data);
     }
     if (id && !initialData && !internalDataRef.current && sharedData.data && cacheRef.current.shared === sharedData.data) {
       return sharedData.data;
     }
-    if (id && sharedData.data && cacheRef.current.shared !== sharedData.data && sharedData.data !== internalDataRef.current) {
+    if (id && sharedData.data && cacheRef.current.shared !== sharedData.data && sharedData.data !== internalDataRef.current && typeof internalDataRef.current === 'object') {
       var _sharedData$data;
       cacheRef.current.shared = sharedData.data;
       if ((_sharedData$data = sharedData.data) !== null && _sharedData$data !== void 0 && _sharedData$data.clearForm) {
@@ -333,38 +367,27 @@ export default function Provider(props) {
   useLayoutEffect(() => {
     if (id) {
       extendAttachment === null || extendAttachment === void 0 ? void 0 : extendAttachment({
+        visibleDataHandler,
         filterDataHandler,
         hasErrors,
         hasFieldError,
         setShowAllErrors,
-        setSubmitState
+        setSubmitState,
+        fieldConnectionsRef
       });
       if (filterSubmitData) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
-  }, [extendAttachment, filterDataHandler, filterSubmitData, hasErrors, hasFieldError, id, rerenderUseDataHook, setShowAllErrors, setSubmitState]);
+  }, [extendAttachment, visibleDataHandler, filterDataHandler, filterSubmitData, hasErrors, hasFieldError, id, rerenderUseDataHook, setShowAllErrors, setSubmitState]);
   const storeInSession = useMemo(() => {
     return debounce(() => {
       var _window$sessionStorag2;
       (_window$sessionStorag2 = window.sessionStorage) === null || _window$sessionStorag2 === void 0 ? void 0 : _window$sessionStorag2.setItem(sessionStorageId, JSON.stringify(internalDataRef.current));
     }, process.env.NODE_ENV === 'test' ? 1 : 800);
   }, [sessionStorageId]);
-  const updateDataValue = useCallback((path, value) => {
-    var _internalDataRef$curr;
-    if (!path) {
-      return;
-    }
-    const givenData = path === '/' ? value : (_internalDataRef$curr = internalDataRef.current) !== null && _internalDataRef$curr !== void 0 ? _internalDataRef$curr : path.match(isArrayJsonPointer) ? [] : {};
-    let newData = null;
-    try {
-      newData = structuredClone(givenData);
-    } catch (e) {
-      newData = givenData;
-    }
-    if (path !== '/') {
-      pointer.set(newData, path, value);
-    }
+  const setData = useCallback(function (newData) {
+    let preventUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (transformIn) {
       newData = mutateDataHandler(newData, transformIn);
     }
@@ -378,12 +401,30 @@ export default function Provider(props) {
     if (sessionStorageId && typeof window !== 'undefined') {
       storeInSession();
     }
-    forceUpdate();
+    if (!preventUpdate) {
+      forceUpdate();
+    }
   }, [extendSharedData, filterSubmitData, id, mutateDataHandler, rerenderUseDataHook, sessionStorageId, storeInSession, transformIn]);
-  const setData = useCallback(newData => {
-    internalDataRef.current = newData;
-    forceUpdate();
-  }, []);
+  const updateDataValue = useCallback(function (path, value) {
+    var _internalDataRef$curr;
+    let {
+      preventUpdate
+    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    if (!path) {
+      return;
+    }
+    const givenData = path === '/' ? value : (_internalDataRef$curr = internalDataRef.current) !== null && _internalDataRef$curr !== void 0 ? _internalDataRef$curr : path.match(isArrayJsonPointer) ? [] : {};
+    let newData = null;
+    try {
+      newData = structuredClone(givenData);
+    } catch (e) {
+      newData = givenData;
+    }
+    if (path !== '/') {
+      pointer.set(newData, path, value);
+    }
+    setData(newData, preventUpdate);
+  }, [setData]);
   const handlePathChangeUnvalidated = useCallback(async (path, value) => {
     if (!path) {
       return null;
@@ -447,11 +488,19 @@ export default function Provider(props) {
       changeHandlerStackRef.current.push(callback);
     }
   }, []);
-  const setMountedFieldState = useCallback((path, options) => {
+  const setMountedFieldState = useCallback((path, state) => {
     if (!mountedFieldsRef.current[path]) {
-      mountedFieldsRef.current[path] = _objectSpread({}, options);
+      mountedFieldsRef.current[path] = _objectSpread({}, state);
     } else {
-      Object.assign(mountedFieldsRef.current[path], options);
+      Object.assign(mountedFieldsRef.current[path], state);
+    }
+    for (const itm of fieldEventListenersRef.current) {
+      if (itm.type === 'onMount' && itm.path === path) {
+        const {
+          callback
+        } = itm;
+        callback();
+      }
     }
   }, []);
   const scrollToTop = useCallback(() => {
@@ -480,7 +529,8 @@ export default function Provider(props) {
       skipErrorCheck
     } = args;
     setSubmitState({
-      error: undefined
+      error: undefined,
+      customStatus: undefined
     });
     const asyncBehaviorIsEnabled = (skipErrorCheck ? true : !hasErrors() || hasFieldState('pending')) && (enableAsyncBehavior || hasFieldWithAsyncValidator());
     if (asyncBehaviorIsEnabled) {
@@ -503,33 +553,41 @@ export default function Provider(props) {
         }
       }
     }
+    let result;
     if (!(skipErrorCheck ? false : hasErrors()) && !hasFieldState('pending') && (skipFieldValidation ? true : !hasFieldState('error'))) {
-      let result;
+      var _result2, _result4, _result5, _result6, _result7;
+      let submitResult;
       try {
         if (isolate) {
-          result = await (onCommit === null || onCommit === void 0 ? void 0 : onCommit(internalDataRef.current, {
+          submitResult = await (onCommit === null || onCommit === void 0 ? void 0 : onCommit(internalDataRef.current, {
             clearData
           }));
         } else {
-          result = await onSubmit();
+          submitResult = await onSubmit();
         }
-        if (result instanceof Error) {
-          throw result;
+        if (submitResult instanceof Error) {
+          throw submitResult;
         }
       } catch (error) {
-        result = {
+        submitResult = {
           error
         };
       }
-      const state = result;
+      result = submitResult;
       if (asyncBehaviorIsEnabled) {
-        setFormState(state !== null && state !== void 0 && state.error ? 'abort' : 'complete');
+        var _result;
+        if ((_result = result) !== null && _result !== void 0 && _result.error) {
+          setFormState('abort');
+        } else if (keepPending.current !== true) {
+          setFormState('complete');
+        }
       }
-      if (state !== null && state !== void 0 && state['status']) {
-        setFormState(state === null || state === void 0 ? void 0 : state['status']);
+      if ((_result2 = result) !== null && _result2 !== void 0 && _result2['status']) {
+        var _result3;
+        setFormState((_result3 = result) === null || _result3 === void 0 ? void 0 : _result3['status']);
       }
-      if (state !== null && state !== void 0 && state.error || state !== null && state !== void 0 && state.warning || state !== null && state !== void 0 && state.info) {
-        setSubmitState(state);
+      if ((_result4 = result) !== null && _result4 !== void 0 && _result4.error || (_result5 = result) !== null && _result5 !== void 0 && _result5.warning || (_result6 = result) !== null && _result6 !== void 0 && _result6.info || (_result7 = result) !== null && _result7 !== void 0 && _result7.customStatus) {
+        setSubmitState(result);
       }
     } else {
       if (asyncBehaviorIsEnabled) {
@@ -549,11 +607,18 @@ export default function Provider(props) {
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
       setShowAllErrors(true);
     }
+    return result;
   }, [clearData, hasErrors, hasFieldState, hasFieldWithAsyncValidator, isolate, onCommit, onSubmitRequest, setFormState, setShowAllErrors, setSubmitState]);
   const handleSubmitListenersRef = useRef([]);
-  const setHandleSubmit = useCallback(callback => {
-    if (!handleSubmitListenersRef.current.includes(callback)) {
-      handleSubmitListenersRef.current.push(callback);
+  const setHandleSubmit = useCallback(function (callback) {
+    let {
+      remove = false
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const listeners = handleSubmitListenersRef.current;
+    if (remove) {
+      handleSubmitListenersRef.current = listeners.filter(item => item !== callback);
+    } else if (!listeners.includes(callback)) {
+      listeners.push(callback);
     }
   }, []);
   const handleSubmitListeners = useCallback(() => {
@@ -566,40 +631,50 @@ export default function Provider(props) {
     });
     return stop;
   }, []);
-  const handleSubmit = useCallback(async function () {
-    let {
-      formElement = null
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    handleSubmitCall({
+  const getSubmitData = useCallback(() => {
+    const data = internalDataRef.current;
+    const mutatedData = transformOut ? mutateDataHandler(data, transformOut) : data;
+    const filteredData = filterSubmitData ? filterDataHandler(mutatedData, filterSubmitData) : mutatedData;
+    return filteredData;
+  }, [filterDataHandler, filterSubmitData, mutateDataHandler, transformOut]);
+  const getSubmitOptions = useCallback(() => {
+    const reduceToVisibleFields = (data, options) => {
+      return visibleDataHandler(transformOut ? mutateDataHandler(data, transformOut) : data, options);
+    };
+    const formElement = formElementRef.current;
+    const options = {
+      filterData,
+      reduceToVisibleFields,
+      resetForm: () => {
+        var _formElement$reset;
+        formElement === null || formElement === void 0 ? void 0 : (_formElement$reset = formElement.reset) === null || _formElement$reset === void 0 ? void 0 : _formElement$reset.call(formElement);
+        if (typeof window !== 'undefined') {
+          if (sessionStorageId) {
+            window.sessionStorage.removeItem(sessionStorageId);
+          }
+        }
+        forceUpdate();
+      },
+      clearData
+    };
+    return options;
+  }, [clearData, filterData, mutateDataHandler, sessionStorageId, transformOut, visibleDataHandler]);
+  const handleSubmit = useCallback(async () => {
+    return await handleSubmitCall({
       enableAsyncBehavior: isAsync(onSubmit),
       onSubmit: async () => {
         if (handleSubmitListeners()) {
           return;
         }
-        const data = internalDataRef.current;
-        const mutatedData = transformOut ? mutateDataHandler(data, transformOut) : data;
-        const filteredData = filterSubmitData ? filterDataHandler(mutatedData, filterSubmitData) : mutatedData;
-        const options = {
-          filterData,
-          resetForm: () => {
-            var _formElement$reset;
-            formElement === null || formElement === void 0 ? void 0 : (_formElement$reset = formElement.reset) === null || _formElement$reset === void 0 ? void 0 : _formElement$reset.call(formElement);
-            if (typeof window !== 'undefined') {
-              if (sessionStorageId) {
-                window.sessionStorage.removeItem(sessionStorageId);
-              }
-            }
-            forceUpdate();
-          },
-          clearData
-        };
+        const data = getSubmitData();
+        const options = getSubmitOptions();
         let result = undefined;
         if (isAsync(onSubmit)) {
-          result = await onSubmit(filteredData, options);
+          result = await onSubmit(data, options);
         } else {
-          result = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredData, options);
+          result = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data, options);
         }
-        const completeResult = await (onSubmitComplete === null || onSubmitComplete === void 0 ? void 0 : onSubmitComplete(filteredData, result));
+        const completeResult = await (onSubmitComplete === null || onSubmitComplete === void 0 ? void 0 : onSubmitComplete(data, result));
         if (completeResult) {
           result = Object.keys(result).length > 0 ? _objectSpread(_objectSpread({}, result), completeResult) : completeResult;
         }
@@ -609,7 +684,7 @@ export default function Provider(props) {
         return result;
       }
     });
-  }, [clearData, filterData, filterDataHandler, filterSubmitData, handleSubmitCall, handleSubmitListeners, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, transformOut]);
+  }, [getSubmitData, getSubmitOptions, handleSubmitCall, handleSubmitListeners, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit]);
   const fieldEventListenersRef = useRef([]);
   const setFieldEventListener = useCallback((path, type, callback) => {
     fieldEventListenersRef.current = fieldEventListenersRef.current.filter(_ref4 => {
@@ -653,7 +728,8 @@ export default function Provider(props) {
     setSubmitState({
       info: undefined,
       warning: undefined,
-      error: undefined
+      error: undefined,
+      customStatus: undefined
     });
   }, [setFormState, setSubmitState]);
   const {
@@ -681,6 +757,7 @@ export default function Provider(props) {
       setFieldEventListener,
       setFieldState,
       setFieldError,
+      setFieldConnection,
       setFieldProps,
       setValueProps,
       hasErrors,
@@ -690,7 +767,10 @@ export default function Provider(props) {
       updateDataValue,
       setData,
       clearData,
+      visibleDataHandler,
       filterDataHandler,
+      getSubmitData,
+      getSubmitOptions,
       addOnChangeHandler,
       setHandleSubmit,
       scrollToTop,
@@ -704,9 +784,11 @@ export default function Provider(props) {
       errors: errorsRef.current,
       showAllErrors: showAllErrorsRef.current,
       hasVisibleError: Object.keys(hasVisibleErrorRef.current).length > 0,
+      fieldConnectionsRef,
       fieldPropsRef,
       valuePropsRef,
       mountedFieldsRef,
+      formElementRef,
       ajvInstance: ajvRef.current,
       id,
       data: internalDataRef.current,