@dnb/eufemia 10.24.0 → 10.26.0

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

@@ -3,7 +3,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, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext } from 'react';
 import pointer from 'json-pointer';
 import Context from '../Context';
 function At(props) {
@@ -15,19 +15,19 @@ function At(props) {
   const dataContext = useContext(Context);
   const {
     data: contextData,
-    handlePathChange: contextHandlePathChange
+    handlePathChange: handlePathChangeDataContext
   } = dataContext;
   const data = contextData && pointer.has(contextData, path) ? pointer.get(contextData, path) : undefined;
-  const handlePathChange = useMemo(() => contextHandlePathChange ? (changePath, value) => {
-    contextHandlePathChange(`${path}${changePath}`, value);
-  } : undefined, [contextHandlePathChange, path]);
+  const handlePathChange = useCallback((changePath, value) => {
+    handlePathChangeDataContext(`${path}${changePath}`, value);
+  }, [handlePathChangeDataContext, path]);
   if (iterate) {
     if (!Array.isArray(data)) {
       return null;
     }
     return React.createElement(React.Fragment, null, data.map((element, i) => {
-      const handlePathChange = contextHandlePathChange ? (changePath, value) => {
-        contextHandlePathChange(`${path}/${i}${changePath}`, value);
+      const handlePathChange = handlePathChangeDataContext ? (changePath, value) => {
+        handlePathChangeDataContext(`${path}/${i}${changePath}`, value);
       } : undefined;
       return React.createElement(Context.Provider, {
         key: `element${i}`,

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

@@ -1 +1 @@
-{"version":3,"file":"At.js","names":["React","useContext","useMemo","pointer","Context","At","props","path","iterate","children","dataContext","data","contextData","handlePathChange","contextHandlePathChange","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, { useContext, useMemo } 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 { data: contextData, handlePathChange: contextHandlePathChange } =\n    dataContext\n\n  const data =\n    contextData && pointer.has(contextData, path)\n      ? pointer.get(contextData, path)\n      : undefined\n\n  const handlePathChange = useMemo(\n    () =>\n      (contextHandlePathChange\n        ? (changePath, value) => {\n            contextHandlePathChange(`${path}${changePath}`, value)\n          }\n        : undefined) as ContextState['handlePathChange'],\n    [contextHandlePathChange, 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            contextHandlePathChange\n              ? (changePath, value) => {\n                  contextHandlePathChange(\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,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,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,GAAGT,UAAU,CAACG,OAAO,CAAC;EACvC,MAAM;IAAEO,IAAI,EAAEC,WAAW;IAAEC,gBAAgB,EAAEC;EAAwB,CAAC,GACpEJ,WAAW;EAEb,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,gBAAgB,GAAGX,OAAO,CAC9B,MACGY,uBAAuB,GACpB,CAACI,UAAU,EAAEC,KAAK,KAAK;IACrBL,uBAAuB,CAAE,GAAEP,IAAK,GAAEW,UAAW,EAAC,EAAEC,KAAK,CAAC;EACxD,CAAC,GACDF,SAA8C,EACpD,CAACH,uBAAuB,EAAEP,IAAI,CAChC,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,uBAAuB,GACnB,CAACI,UAAU,EAAEC,KAAK,KAAK;QACrBL,uBAAuB,CACpB,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 '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"}

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

@@ -11,17 +11,20 @@ export type EventListenerCall = {
     callback: () => any;
 };
 export type FilterDataHandler<Data> = (data: Data, filter: FilterData) => Partial<Data>;
-export type FilterData = (path: Path, value: any, props: FieldProps) => boolean | undefined;
+export type FilterData = (path: Path, value: any, props: FieldProps, internal: {
+    error: Error | undefined;
+}) => boolean | undefined;
 export interface ContextState {
     id?: Identifier;
     hasContext: boolean;
-    /** The dataset for the form / form steps */
+    /** The dataset for the form / form wizard */
     data: any;
     /** Should the form validate data before submitting? */
     errors?: Record<string, Error>;
     /** Will set autoComplete="on" on each nested Field.String and Field.Number */
     autoComplete?: boolean;
-    handlePathChange: (path: Path, value: any) => EventReturnWithStateObject | unknown | Promise<EventReturnWithStateObject | unknown>;
+    handlePathChange: (path: Path, value?: any) => EventReturnWithStateObject | unknown | Promise<EventReturnWithStateObject | unknown>;
+    handlePathChangeUnvalidated: (path: Path, value: any) => void;
     updateDataValue: (path: Path, value: any) => void;
     setData: (data: any) => void;
     filterDataHandler: (data: any, filter: FilterData) => any;
@@ -40,6 +43,7 @@ export interface ContextState {
     handleUnMountField: (path: Path) => void;
     formState: SubmitState;
     setFormState?: (state: SubmitState) => void;
+    setSubmitState?: (state: EventStateObject) => void;
     handleSubmitCall: ({ onSubmit, enableAsyncBehaviour, skipFieldValidation, skipErrorCheck, }: {
         onSubmit: () => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
         enableAsyncBehaviour: boolean;

package/extensions/forms/DataContext/Context.js

@@ -7,6 +7,7 @@ export const defaultContextState = {
   disabled: undefined,
   submitState: undefined,
   handlePathChange: () => null,
+  handlePathChangeUnvalidated: () => null,
   updateDataValue: () => null,
   setData: () => null,
   filterDataHandler: () => null,
@@ -16,6 +17,7 @@ export const defaultContextState = {
   showAllErrors: false,
   formState: undefined,
   setFormState: () => null,
+  setSubmitState: () => null,
   setFieldEventListener: () => null,
   handleSubmitCall: () => null,
   setShowAllErrors: () => null,

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

@@ -1 +1 @@
-{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","disabled","submitState","handlePathChange","updateDataValue","setData","filterDataHandler","validateData","handleSubmit","scrollToTop","showAllErrors","formState","setFormState","setFieldEventListener","handleSubmitCall","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldState","checkFieldStateFor","setFieldState","setFieldError","setProps","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} from '../types'\nimport { Props as ProviderProps } from './Provider'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport type EventListenerCall = {\n  path: Path\n  type: 'onSubmit'\n  callback: () => any\n}\n\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterData = (\n  path: Path,\n  value: any,\n  props: FieldProps\n) => boolean | undefined\n\nexport interface ContextState {\n  id?: Identifier\n  hasContext: boolean\n  /** The dataset for the form / form steps */\n  data: 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  updateDataValue: (path: Path, value: any) => void\n  setData: (data: any) => void\n  filterDataHandler: (data: any, filter: FilterData) => any\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  checkFieldStateFor: (path: Path, state: SubmitState) => boolean\n  setFieldState: (path: Path, fieldState: SubmitState) => void\n  setFieldError: (path: Path, error: Error | FormError) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  formState: SubmitState\n  setFormState?: (state: SubmitState) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehaviour,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehaviour: 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  setProps: (path: Path, props: any) => void\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  disabled: boolean\n  submitState: Partial<EventStateObject>\n  _isInsideFormElement?: boolean\n  props: ProviderProps<unknown>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  disabled: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  filterDataHandler: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  formState: undefined,\n  setFormState: () => null,\n  setFieldEventListener: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  checkFieldStateFor: () => false,\n  setFieldState: () => null,\n  setFieldError: () => null,\n  setProps: () => 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;AAmGnD,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,QAAQ,EAAEF,SAAS;EACnBG,WAAW,EAAEH,SAAS;EACtBI,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,SAAS,EAAEZ,SAAS;EACpBa,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,qBAAqB,EAAEA,CAAA,KAAM,IAAI;EACjCC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,kBAAkB,EAAEA,CAAA,KAAM,KAAK;EAC/BC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAE9B,eAAe,CAAC,CAAC;EAC9B+B,oBAAoB,EAAE3B,SAAS;EAC/B4B,oBAAoB,EAAE,KAAK;EAC3BC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAGnC,KAAK,CAACoC,aAAa,CAAelC,mBAAmB,CAAC;AAEtE,eAAeiC,OAAO"}
+{"version":3,"file":"Context.js","names":["React","makeAjvInstance","defaultContextState","hasContext","data","undefined","schema","disabled","submitState","handlePathChange","handlePathChangeUnvalidated","updateDataValue","setData","filterDataHandler","validateData","handleSubmit","scrollToTop","showAllErrors","formState","setFormState","setSubmitState","setFieldEventListener","handleSubmitCall","setShowAllErrors","mountedFieldPaths","handleMountField","handleUnMountField","hasErrors","hasFieldState","checkFieldStateFor","setFieldState","setFieldError","setProps","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} from '../types'\nimport { Props as ProviderProps } from './Provider'\n\ntype HandleSubmitProps = {\n  formElement?: HTMLFormElement\n}\n\nexport type EventListenerCall = {\n  path: Path\n  type: 'onSubmit'\n  callback: () => any\n}\n\nexport type FilterDataHandler<Data> = (\n  data: Data,\n  filter: FilterData\n) => Partial<Data>\nexport type FilterData = (\n  path: Path,\n  value: any,\n  props: FieldProps,\n  internal: {\n    error: Error | undefined\n  }\n) => boolean | undefined\n\nexport interface ContextState {\n  id?: Identifier\n  hasContext: boolean\n  /** The dataset for the form / form wizard */\n  data: 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  filterDataHandler: (data: any, filter: FilterData) => any\n  validateData: () => void\n  handleSubmit: (props?: HandleSubmitProps) => any\n  scrollToTop: () => void\n  // Error status\n  showAllErrors: boolean\n  setShowAllErrors: (showAllErrors: boolean) => void\n  hasErrors: () => boolean\n  hasFieldState: (state: SubmitState) => boolean\n  checkFieldStateFor: (path: Path, state: SubmitState) => boolean\n  setFieldState: (path: Path, fieldState: SubmitState) => void\n  setFieldError: (path: Path, error: Error | FormError) => void\n  // Mounted fields - Components telling the provider what fields is on screen at any time\n  mountedFieldPaths: string[]\n  handleMountField: (path: Path) => void\n  handleUnMountField: (path: Path) => void\n  formState: SubmitState\n  setFormState?: (state: SubmitState) => void\n  setSubmitState?: (state: EventStateObject) => void\n  handleSubmitCall: ({\n    onSubmit,\n    enableAsyncBehaviour,\n    skipFieldValidation,\n    skipErrorCheck,\n  }: {\n    onSubmit: () =>\n      | EventReturnWithStateObject\n      | void\n      | Promise<EventReturnWithStateObject | void>\n    enableAsyncBehaviour: 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  setProps: (path: Path, props: any) => void\n  ajvInstance: Ajv\n  contextErrorMessages: CustomErrorMessagesWithPaths\n  schema: AllJSONSchemaVersions\n  disabled: boolean\n  submitState: Partial<EventStateObject>\n  _isInsideFormElement?: boolean\n  props: ProviderProps<unknown>\n}\n\nexport const defaultContextState: ContextState = {\n  hasContext: false,\n  data: undefined,\n  schema: undefined,\n  disabled: undefined,\n  submitState: undefined,\n  handlePathChange: () => null,\n  handlePathChangeUnvalidated: () => null,\n  updateDataValue: () => null,\n  setData: () => null,\n  filterDataHandler: () => null,\n  validateData: () => null,\n  handleSubmit: () => null,\n  scrollToTop: () => null,\n  showAllErrors: false,\n  formState: undefined,\n  setFormState: () => null,\n  setSubmitState: () => null,\n  setFieldEventListener: () => null,\n  handleSubmitCall: () => null,\n  setShowAllErrors: () => null,\n  mountedFieldPaths: [],\n  handleMountField: () => null,\n  handleUnMountField: () => null,\n  hasErrors: () => false,\n  hasFieldState: () => false,\n  checkFieldStateFor: () => false,\n  setFieldState: () => null,\n  setFieldError: () => null,\n  setProps: () => 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;AAwGnD,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,UAAU,EAAE,KAAK;EACjBC,IAAI,EAAEC,SAAS;EACfC,MAAM,EAAED,SAAS;EACjBE,QAAQ,EAAEF,SAAS;EACnBG,WAAW,EAAEH,SAAS;EACtBI,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;EACvCC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,OAAO,EAAEA,CAAA,KAAM,IAAI;EACnBC,iBAAiB,EAAEA,CAAA,KAAM,IAAI;EAC7BC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,WAAW,EAAEA,CAAA,KAAM,IAAI;EACvBC,aAAa,EAAE,KAAK;EACpBC,SAAS,EAAEb,SAAS;EACpBc,YAAY,EAAEA,CAAA,KAAM,IAAI;EACxBC,cAAc,EAAEA,CAAA,KAAM,IAAI;EAC1BC,qBAAqB,EAAEA,CAAA,KAAM,IAAI;EACjCC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,iBAAiB,EAAE,EAAE;EACrBC,gBAAgB,EAAEA,CAAA,KAAM,IAAI;EAC5BC,kBAAkB,EAAEA,CAAA,KAAM,IAAI;EAC9BC,SAAS,EAAEA,CAAA,KAAM,KAAK;EACtBC,aAAa,EAAEA,CAAA,KAAM,KAAK;EAC1BC,kBAAkB,EAAEA,CAAA,KAAM,KAAK;EAC/BC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,aAAa,EAAEA,CAAA,KAAM,IAAI;EACzBC,QAAQ,EAAEA,CAAA,KAAM,IAAI;EACpBC,WAAW,EAAEhC,eAAe,CAAC,CAAC;EAC9BiC,oBAAoB,EAAE7B,SAAS;EAC/B8B,oBAAoB,EAAE,KAAK;EAC3BC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,OAAO,GAAGrC,KAAK,CAACsC,aAAa,CAAepC,mBAAmB,CAAC;AAEtE,eAAemC,OAAO"}

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

@@ -58,10 +58,6 @@ export interface Props<Data extends JsonObject> {
      * The result of the onSubmit function
      */
     result: unknown) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
-    /**
-     * Shows an indicator on the current label during a field change.
-     */
-    enableAsyncChangeBehavior?: boolean;
     /**
      * Minimum time to display the submit indicator.
      */
@@ -69,7 +65,7 @@ export interface Props<Data extends JsonObject> {
     /**
      * The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission.
      */
-    asyncBehaviorTimeout?: number;
+    asyncSubmitTimeout?: number;
     /**
      * Scroll to top on submit
      */

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

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "scrollTopOnSubmit", "minimumAsyncBehaviorTime", "asyncBehaviorTimeout", "sessionStorageId", "ajvInstance", "filterData", "errorMessages", "children"];
+const _excluded = ["id", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "scrollTopOnSubmit", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "sessionStorageId", "ajvInstance", "filterData", "errorMessages", "children"];
 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 } from 'react';
@@ -32,7 +32,7 @@ export default function Provider(props) {
       onSubmitComplete,
       scrollTopOnSubmit,
       minimumAsyncBehaviorTime,
-      asyncBehaviorTimeout,
+      asyncSubmitTimeout,
       sessionStorageId,
       ajvInstance,
       filterData,
@@ -95,7 +95,7 @@ export default function Provider(props) {
   }, [executeAjvValidator]);
   const checkFieldStateFor = useCallback((path, state) => {
     var _errorsRef$current;
-    return Boolean(state === 'error' ? ((_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? void 0 : _errorsRef$current[path]) instanceof Error || fieldErrorRef.current[path] : fieldStateRef.current[path] === state);
+    return Boolean(state === 'error' ? ((_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? void 0 : _errorsRef$current[path]) instanceof Error || fieldErrorRef.current[path] instanceof Error : fieldStateRef.current[path] === state);
   }, []);
   const hasFieldState = useCallback(state => {
     return mountedFieldPathsRef.current.some(path => {
@@ -106,7 +106,7 @@ export default function Provider(props) {
     return hasFieldState('error');
   }, [hasFieldState]);
   const setFieldError = useCallback((path, error) => {
-    fieldErrorRef.current[path] = Boolean(error);
+    fieldErrorRef.current[path] = error;
   }, []);
   const setFieldState = useCallback((path, fieldState) => {
     if (fieldState !== fieldStateRef.current[path]) {
@@ -119,9 +119,12 @@ export default function Provider(props) {
     if (filter) {
       const filtered = _objectSpread({}, data);
       Object.entries(fieldPropsRef.current).forEach(_ref => {
+        var _fieldErrorRef$curren;
         let [path, props] = _ref;
         const exists = pointer.has(data, path);
-        const result = filter(path, exists ? pointer.get(data, path) : undefined, props);
+        const result = filter(path, exists ? pointer.get(data, path) : undefined, props, {
+          error: (_fieldErrorRef$curren = fieldErrorRef.current) === null || _fieldErrorRef$curren === void 0 ? void 0 : _fieldErrorRef$curren[path]
+        });
         if (result === false && exists) {
           pointer.remove(filtered, path);
         }
@@ -188,13 +191,14 @@ export default function Provider(props) {
       extendAttachment === null || extendAttachment === void 0 ? void 0 : extendAttachment({
         filterDataHandler,
         hasErrors,
-        setShowAllErrors
+        setShowAllErrors,
+        setSubmitState
       });
       if (filterData) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
-  }, [extendAttachment, filterData, filterDataHandler, hasErrors, id, rerenderUseDataHook, setShowAllErrors]);
+  }, [extendAttachment, filterData, filterDataHandler, hasErrors, id, rerenderUseDataHook, setShowAllErrors, setSubmitState]);
   const updateDataValue = useCallback((path, value) => {
     var _internalDataRef$curr;
     if (!path) {
@@ -228,23 +232,32 @@ export default function Provider(props) {
     internalDataRef.current = newData;
     forceUpdate();
   }, []);
-  const handlePathChange = useCallback(async (path, value) => {
+  const handlePathChangeUnvalidated = useCallback(async (path, value) => {
     if (!path) {
       return null;
     }
+    updateDataValue(path, value);
     if (isAsync(onPathChange)) {
       await (onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value));
     } else {
       onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
     }
-    const newData = updateDataValue(path, value);
+  }, [onPathChange, updateDataValue]);
+  const handlePathChange = useCallback(async function (path) {
+    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_undefined_';
+    if (!path) {
+      return null;
+    }
+    if (value !== '_undefined_') {
+      handlePathChangeUnvalidated(path, value);
+    }
     showAllErrorsRef.current = false;
     validateData();
     if (isAsync(onChange)) {
-      return await onChange(newData);
+      return await onChange(internalDataRef.current);
     }
-    return onChange === null || onChange === void 0 ? void 0 : onChange(newData);
-  }, [onChange, onPathChange, updateDataValue, validateData]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(internalDataRef.current);
+  }, [handlePathChangeUnvalidated, onChange, validateData]);
   const handleMountField = useCallback(path => {
     mountedFieldPathsRef.current = addListPath(mountedFieldPathsRef.current, path);
   }, []);
@@ -274,7 +287,7 @@ export default function Provider(props) {
     setSubmitState({
       error: undefined
     });
-    const asyncBehaviorIsEnabled = !(skipErrorCheck ? false : hasErrors()) && (enableAsyncBehaviour || hasFieldWithAsyncValidator());
+    const asyncBehaviorIsEnabled = (skipErrorCheck ? true : !hasErrors() || hasFieldState('pending')) && (enableAsyncBehaviour || hasFieldWithAsyncValidator());
     if (asyncBehaviorIsEnabled) {
       setFormState('pending');
     }
@@ -320,15 +333,15 @@ export default function Provider(props) {
         window.requestAnimationFrame(() => {
           setFormState(undefined);
         });
-      }
-      if (!skipFieldValidation) {
-        onSubmitContinueRef.current = () => {
-          window.requestAnimationFrame(() => {
-            handleSubmitCall(_objectSpread(_objectSpread({}, args), {}, {
-              skipFieldValidation: true
-            }));
-          });
-        };
+        if (!skipFieldValidation) {
+          onSubmitContinueRef.current = () => {
+            window.requestAnimationFrame(() => {
+              handleSubmitCall(_objectSpread(_objectSpread({}, args), {}, {
+                skipFieldValidation: true
+              }));
+            });
+          };
+        }
       }
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
       setShowAllErrors(true);
@@ -417,24 +430,35 @@ export default function Provider(props) {
       forceUpdate();
     }
   }, [schema, validateData, forceUpdate]);
+  const onTimeout = useCallback(() => {
+    setFormState(undefined);
+    setSubmitState({
+      info: undefined,
+      warning: undefined,
+      error: undefined
+    });
+  }, [setFormState, setSubmitState]);
   const {
     bufferedFormState: formState
   } = useFormStatusBuffer({
     formState: formStateRef.current,
     waitFor: hasFieldState('pending'),
     minimumAsyncBehaviorTime,
-    asyncBehaviorTimeout
+    asyncSubmitTimeout,
+    onTimeout
   });
   const submitState = submitStateRef.current;
   const disabled = (_rest$disabled = rest === null || rest === void 0 ? void 0 : rest['disabled']) !== null && _rest$disabled !== void 0 ? _rest$disabled : formState === 'pending';
   return React.createElement(Context.Provider, {
     value: _objectSpread({
       handlePathChange,
+      handlePathChangeUnvalidated,
       handleSubmit,
       handleMountField,
       handleUnMountField,
       handleSubmitCall,
       setFormState,
+      setSubmitState,
       setShowAllErrors,
       setFieldEventListener,
       setFieldState,
@@ -479,7 +503,8 @@ function useFormStatusBuffer(props) {
     formState,
     waitFor,
     minimumAsyncBehaviorTime,
-    asyncBehaviorTimeout
+    asyncSubmitTimeout,
+    onTimeout
   } = props || {};
   const [, forceUpdate] = useReducer(() => ({}), {});
   const stateRef = useRef();
@@ -515,7 +540,7 @@ function useFormStatusBuffer(props) {
     if (formState === 'complete') {
       hadCompleteRef.current = true;
     }
-    if (formState === 'pending') {
+    if (formState === 'pending' && stateRef.current !== 'pending') {
       clear();
       nowRef.current = Date.now();
       hadCompleteRef.current = false;
@@ -535,13 +560,16 @@ function useFormStatusBuffer(props) {
           clear();
         }, delay + minimum);
       }
+    }
+    if (stateRef.current === 'pending') {
       timeoutRef.current.timeout = setTimeout(() => {
-        nowRef.current = 0;
+        clear();
         setState(undefined);
-      }, asyncBehaviorTimeout !== null && asyncBehaviorTimeout !== void 0 ? asyncBehaviorTimeout : 30000);
+        onTimeout === null || onTimeout === void 0 ? void 0 : onTimeout();
+      }, asyncSubmitTimeout !== null && asyncSubmitTimeout !== void 0 ? asyncSubmitTimeout : 30000);
     }
     return clear;
-  }, [clear, minimumAsyncBehaviorTime, formState, setState, waitFor, asyncBehaviorTimeout]);
+  }, [clear, minimumAsyncBehaviorTime, formState, setState, waitFor, asyncSubmitTimeout, onTimeout]);
   return {
     bufferedFormState: stateRef.current
   };