@dnb/eufemia 10.43.0 → 10.45.0

package/es/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js

@@ -1,16 +1,18 @@
 "use client";
 
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useReducer, useRef } from 'react';
 import FieldBoundaryContext from './FieldBoundaryContext';
 import DataContext from '../Context';
 export default function FieldBoundaryProvider({
   children
 }) {
+  const [, forceUpdate] = useReducer(() => ({}), {});
   const {
     showAllErrors,
     hasVisibleError
   } = useContext(DataContext);
   const errorsRef = useRef({});
+  const showBoundaryErrorsRef = useRef(false);
   const hasError = Object.keys(errorsRef.current || {}).length > 0;
   const hasSubmitError = showAllErrors && hasError;
   const setFieldError = useCallback((path, error) => {
@@ -21,11 +23,17 @@ export default function FieldBoundaryProvider({
       (_errorsRef$current = errorsRef.current) === null || _errorsRef$current === void 0 ? true : delete _errorsRef$current[path];
     }
   }, []);
+  const setShowBoundaryErrors = useCallback(showBoundaryErrors => {
+    showBoundaryErrorsRef.current = showBoundaryErrors;
+    forceUpdate();
+  }, []);
   const context = {
     hasError,
     hasSubmitError,
     hasVisibleError,
     errorsRef,
+    showBoundaryErrors: showBoundaryErrorsRef.current,
+    setShowBoundaryErrors,
     setFieldError
   };
   return React.createElement(FieldBoundaryContext.Provider, {

package/es/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBoundaryProvider.js","names":["React","useCallback","useContext","useRef","FieldBoundaryContext","DataContext","FieldBoundaryProvider","children","showAllErrors","hasVisibleError","errorsRef","hasError","Object","keys","current","length","hasSubmitError","setFieldError","path","error","_errorsRef$current","context","createElement","Provider","value"],"sources":["../../../../../../src/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport FieldBoundaryContext, {\n  FieldBoundaryContextState,\n} from './FieldBoundaryContext'\nimport DataContext from '../Context'\nimport { Path } from '../../types'\n\nexport default function FieldBoundaryProvider({ children }) {\n  const { showAllErrors, hasVisibleError } = useContext(DataContext)\n\n  const errorsRef = useRef<Record<Path, boolean>>({})\n  const hasError = Object.keys(errorsRef.current || {}).length > 0\n  const hasSubmitError = showAllErrors && hasError\n\n  const setFieldError = useCallback((path: Path, error: Error) => {\n    if (error) {\n      errorsRef.current[path] = !!error\n    } else {\n      delete errorsRef.current?.[path]\n    }\n  }, [])\n\n  const context: FieldBoundaryContextState = {\n    hasError,\n    hasSubmitError,\n    hasVisibleError,\n    errorsRef,\n    setFieldError,\n  }\n\n  return (\n    <FieldBoundaryContext.Provider value={context}>\n      {children}\n    </FieldBoundaryContext.Provider>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,oBAAoB,MAEpB,wBAAwB;AAC/B,OAAOC,WAAW,MAAM,YAAY;AAGpC,eAAe,SAASC,qBAAqBA,CAAC;EAAEC;AAAS,CAAC,EAAE;EAC1D,MAAM;IAAEC,aAAa;IAAEC;EAAgB,CAAC,GAAGP,UAAU,CAACG,WAAW,CAAC;EAElE,MAAMK,SAAS,GAAGP,MAAM,CAAwB,CAAC,CAAC,CAAC;EACnD,MAAMQ,QAAQ,GAAGC,MAAM,CAACC,IAAI,CAACH,SAAS,CAACI,OAAO,IAAI,CAAC,CAAC,CAAC,CAACC,MAAM,GAAG,CAAC;EAChE,MAAMC,cAAc,GAAGR,aAAa,IAAIG,QAAQ;EAEhD,MAAMM,aAAa,GAAGhB,WAAW,CAAC,CAACiB,IAAU,EAAEC,KAAY,KAAK;IAC9D,IAAIA,KAAK,EAAE;MACTT,SAAS,CAACI,OAAO,CAACI,IAAI,CAAC,GAAG,CAAC,CAACC,KAAK;IACnC,CAAC,MAAM;MAAA,IAAAC,kBAAA;MACL,CAAAA,kBAAA,GAAOV,SAAS,CAACI,OAAO,cAAAM,kBAAA,qBAAxB,OAAOA,kBAAA,CAAoBF,IAAI,CAAC;IAClC;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,OAAkC,GAAG;IACzCV,QAAQ;IACRK,cAAc;IACdP,eAAe;IACfC,SAAS;IACTO;EACF,CAAC;EAED,OACEjB,KAAA,CAAAsB,aAAA,CAAClB,oBAAoB,CAACmB,QAAQ;IAACC,KAAK,EAAEH;EAAQ,GAC3Cd,QAC4B,CAAC;AAEpC"}
+{"version":3,"file":"FieldBoundaryProvider.js","names":["React","useCallback","useContext","useReducer","useRef","FieldBoundaryContext","DataContext","FieldBoundaryProvider","children","forceUpdate","showAllErrors","hasVisibleError","errorsRef","showBoundaryErrorsRef","hasError","Object","keys","current","length","hasSubmitError","setFieldError","path","error","_errorsRef$current","setShowBoundaryErrors","showBoundaryErrors","context","createElement","Provider","value"],"sources":["../../../../../../src/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useReducer, useRef } from 'react'\nimport FieldBoundaryContext, {\n  FieldBoundaryContextState,\n} from './FieldBoundaryContext'\nimport DataContext from '../Context'\nimport { Path } from '../../types'\n\nexport default function FieldBoundaryProvider({ children }) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const { showAllErrors, hasVisibleError } = useContext(DataContext)\n\n  const errorsRef = useRef<Record<Path, boolean>>({})\n  const showBoundaryErrorsRef = useRef<boolean>(false)\n  const hasError = Object.keys(errorsRef.current || {}).length > 0\n  const hasSubmitError = showAllErrors && hasError\n\n  const setFieldError = useCallback((path: Path, error: Error) => {\n    if (error) {\n      errorsRef.current[path] = !!error\n    } else {\n      delete errorsRef.current?.[path]\n    }\n  }, [])\n\n  const setShowBoundaryErrors = useCallback(\n    (showBoundaryErrors: boolean) => {\n      showBoundaryErrorsRef.current = showBoundaryErrors\n      forceUpdate()\n    },\n    []\n  )\n\n  const context: FieldBoundaryContextState = {\n    hasError,\n    hasSubmitError,\n    hasVisibleError,\n    errorsRef,\n    showBoundaryErrors: showBoundaryErrorsRef.current,\n    setShowBoundaryErrors,\n    setFieldError,\n  }\n\n  return (\n    <FieldBoundaryContext.Provider value={context}>\n      {children}\n    </FieldBoundaryContext.Provider>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC1E,OAAOC,oBAAoB,MAEpB,wBAAwB;AAC/B,OAAOC,WAAW,MAAM,YAAY;AAGpC,eAAe,SAASC,qBAAqBA,CAAC;EAAEC;AAAS,CAAC,EAAE;EAC1D,MAAM,GAAGC,WAAW,CAAC,GAAGN,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClD,MAAM;IAAEO,aAAa;IAAEC;EAAgB,CAAC,GAAGT,UAAU,CAACI,WAAW,CAAC;EAElE,MAAMM,SAAS,GAAGR,MAAM,CAAwB,CAAC,CAAC,CAAC;EACnD,MAAMS,qBAAqB,GAAGT,MAAM,CAAU,KAAK,CAAC;EACpD,MAAMU,QAAQ,GAAGC,MAAM,CAACC,IAAI,CAACJ,SAAS,CAACK,OAAO,IAAI,CAAC,CAAC,CAAC,CAACC,MAAM,GAAG,CAAC;EAChE,MAAMC,cAAc,GAAGT,aAAa,IAAII,QAAQ;EAEhD,MAAMM,aAAa,GAAGnB,WAAW,CAAC,CAACoB,IAAU,EAAEC,KAAY,KAAK;IAC9D,IAAIA,KAAK,EAAE;MACTV,SAAS,CAACK,OAAO,CAACI,IAAI,CAAC,GAAG,CAAC,CAACC,KAAK;IACnC,CAAC,MAAM;MAAA,IAAAC,kBAAA;MACL,CAAAA,kBAAA,GAAOX,SAAS,CAACK,OAAO,cAAAM,kBAAA,qBAAxB,OAAOA,kBAAA,CAAoBF,IAAI,CAAC;IAClC;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,qBAAqB,GAAGvB,WAAW,CACtCwB,kBAA2B,IAAK;IAC/BZ,qBAAqB,CAACI,OAAO,GAAGQ,kBAAkB;IAClDhB,WAAW,CAAC,CAAC;EACf,CAAC,EACD,EACF,CAAC;EAED,MAAMiB,OAAkC,GAAG;IACzCZ,QAAQ;IACRK,cAAc;IACdR,eAAe;IACfC,SAAS;IACTa,kBAAkB,EAAEZ,qBAAqB,CAACI,OAAO;IACjDO,qBAAqB;IACrBJ;EACF,CAAC;EAED,OACEpB,KAAA,CAAA2B,aAAA,CAACtB,oBAAoB,CAACuB,QAAQ;IAACC,KAAK,EAAEH;EAAQ,GAC3ClB,QAC4B,CAAC;AAEpC"}

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { JsonObject } from 'json-pointer';
 import { Ajv } from '../../utils/ajv';
-import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, Path, OnSubmit, OnChange, EventReturnWithStateObject, OnCommit } from '../../types';
+import { CustomErrorMessagesWithPaths, AllJSONSchemaVersions, Path, OnSubmit, OnChange, EventReturnWithStateObject } from '../../types';
+import type { IsolationProviderProps } from '../../Form/Isolation/Isolation';
 import { ContextProps } from '../../../../shared/Context';
 import { FilterData, TransformData } from '../Context';
-export interface Props<Data extends JsonObject> {
+export interface Props<Data extends JsonObject> extends IsolationProviderProps<Data> {
     /**
      * Unique ID to communicate with the hook Form.useData
      */
@@ -57,7 +58,7 @@ export interface Props<Data extends JsonObject> {
     /**
      * Change handler for each value
      */
-    onPathChange?: (path: Path, value: any) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
+    onPathChange?: (path: Path, value: unknown) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
     /**
      * Will emit on a form submit – if validation has passed.
      * You can provide an async function to shows a submit indicator during submit. All form elements will be disabled during the submit.
@@ -75,11 +76,6 @@ export interface Props<Data extends JsonObject> {
      * The result of the onSubmit function
      */
     result: unknown) => EventReturnWithStateObject | void | Promise<EventReturnWithStateObject | void>;
-    /**
-     * Used internally by the Form.Isolation component.
-     * Will emit on a nested form context commit – if validation has passed.
-     */
-    onCommit?: OnCommit<Data>;
     /**
      * Minimum time to display the submit indicator.
      */
@@ -108,10 +104,6 @@ export interface Props<Data extends JsonObject> {
      * Make all fields required
      */
     required?: boolean;
-    /**
-     * Used internally by the Form.Isolation component
-     */
-    isolate?: boolean;
     /**
      * The children of the context provider
      */
@@ -121,4 +113,5 @@ export default function Provider<Data extends JsonObject>(props: Props<Data>): i
 type PathList = string[];
 export declare function addListPath(paths: PathList, path: Path): PathList;
 export declare function removeListPath(paths: PathList, path: Path): PathList;
+export declare const clearedData: Readonly<{}>;
 export {};

package/es/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", "globalStatusId", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "onCommit", "scrollTopOnSubmit", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "sessionStorageId", "ajvInstance", "transformIn", "transformOut", "filterSubmitData", "filterData", "locale", "translations", "required", "errorMessages", "isolate", "children"];
+const _excluded = ["id", "globalStatusId", "defaultData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "onCommit", "onClear", "scrollTopOnSubmit", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "sessionStorageId", "ajvInstance", "transformIn", "transformOut", "filterSubmitData", "filterData", "locale", "translations", "required", "errorMessages", "isolate", "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, useContext } from 'react';
@@ -20,7 +20,7 @@ import structuredClone from '@ungap/structured-clone';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 const isArrayJsonPointer = /^\/\d+(\/|$)/;
 export default function Provider(props) {
-  var _sharedAttachments$da;
+  var _sharedAttachments$da, _sharedData$data3;
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
       id,
@@ -34,6 +34,7 @@ export default function Provider(props) {
       onSubmitRequest,
       onSubmitComplete,
       onCommit,
+      onClear,
       scrollTopOnSubmit,
       minimumAsyncBehaviorTime,
       asyncSubmitTimeout,
@@ -55,8 +56,7 @@ export default function Provider(props) {
     throw new Error('Use "defaultData" instead of "data" when using sessionStorageId');
   }
   const {
-    hasContext,
-    handlePathChange: handlePathChangeNested
+    hasContext
   } = useContext(Context) || {};
   if (hasContext && !isolate) {
     throw new Error('DataContext (Form.Handler) can not be nested');
@@ -275,7 +275,7 @@ export default function Provider(props) {
     shared: sharedData.data,
     hasUsedInitialData: false
   });
-  internalDataRef.current = useMemo(() => {
+  const internalData = useMemo(() => {
     if (id && initialData && !sharedData.data) {
       sharedData.update(initialData);
     }
@@ -286,7 +286,13 @@ export default function Provider(props) {
       return sharedData.data;
     }
     if (id && sharedData.data && cacheRef.current.shared !== sharedData.data && sharedData.data !== internalDataRef.current) {
+      var _sharedData$data;
       cacheRef.current.shared = sharedData.data;
+      if ((_sharedData$data = sharedData.data) !== null && _sharedData$data !== void 0 && _sharedData$data.clearForm) {
+        const clear = cacheRef.current.shared = clearedData;
+        setSharedData(clear);
+        return clear;
+      }
       return _objectSpread(_objectSpread({}, internalDataRef.current), sharedData.data);
     }
     if (data !== cacheRef.current.data) {
@@ -294,7 +300,14 @@ export default function Provider(props) {
       return data;
     }
     return internalDataRef.current;
-  }, [data, id, initialData, sharedData]);
+  }, [id, initialData, sharedData, data, setSharedData]);
+  internalDataRef.current = props.path && pointer.has(internalData, props.path) ? pointer.get(internalData, props.path) : internalData;
+  useEffect(() => {
+    var _sharedData$data2;
+    if ((_sharedData$data2 = sharedData.data) !== null && _sharedData$data2 !== void 0 && _sharedData$data2.clearForm) {
+      onClear === null || onClear === void 0 ? void 0 : onClear();
+    }
+  }, [onClear, (_sharedData$data3 = sharedData.data) === null || _sharedData$data3 === void 0 ? void 0 : _sharedData$data3.clearForm]);
   useLayoutEffect(() => {
     if (id && initialData && !sharedData.data) {
       extendSharedData === null || extendSharedData === void 0 ? void 0 : extendSharedData(initialData);
@@ -415,6 +428,15 @@ export default function Provider(props) {
       });
     }
   }, []);
+  const clearData = useCallback(() => {
+    internalDataRef.current = clearedData;
+    if (id) {
+      setSharedData === null || setSharedData === void 0 ? void 0 : setSharedData(internalDataRef.current);
+    } else {
+      forceUpdate();
+    }
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+  }, [id, onClear, setSharedData]);
   const handleSubmitCall = useCallback(async args => {
     const {
       onSubmit,
@@ -448,8 +470,9 @@ export default function Provider(props) {
       let result;
       try {
         if (isolate) {
-          handlePathChangeNested === null || handlePathChangeNested === void 0 ? void 0 : handlePathChangeNested('/', internalDataRef.current);
-          result = await (onCommit === null || onCommit === void 0 ? void 0 : onCommit(internalDataRef.current));
+          result = await (onCommit === null || onCommit === void 0 ? void 0 : onCommit(internalDataRef.current, {
+            clearData
+          }));
         } else {
           result = await onSubmit();
         }
@@ -490,13 +513,32 @@ export default function Provider(props) {
       setShowAllErrors(true);
     }
     return internalDataRef.current;
-  }, [isolate, setSubmitState, hasErrors, hasFieldState, hasFieldWithAsyncValidator, handlePathChangeNested, onCommit, setFormState, onSubmitRequest, setShowAllErrors]);
+  }, [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 handleSubmitListeners = useCallback(() => {
+    let stop = false;
+    const preventSubmit = () => stop = true;
+    handleSubmitListenersRef.current.forEach(cb => {
+      cb({
+        preventSubmit
+      });
+    });
+    return stop;
+  }, []);
   const handleSubmit = useCallback(async ({
     formElement = null
   } = {}) => {
     handleSubmitCall({
       enableAsyncBehaviour: isAsync(onSubmit),
       onSubmit: async () => {
+        if (handleSubmitListeners()) {
+          return;
+        }
         const data = internalDataRef.current;
         const filteredData = filterDataHandler(transformOut ? mutateDataHandler(data, transformOut) : data);
         const opts = {
@@ -510,14 +552,7 @@ export default function Provider(props) {
             }
             forceUpdate();
           },
-          clearData: () => {
-            internalDataRef.current = {};
-            if (id) {
-              setSharedData === null || setSharedData === void 0 ? void 0 : setSharedData({});
-            } else {
-              forceUpdate();
-            }
-          }
+          clearData
         };
         let result = undefined;
         if (isAsync(onSubmit)) {
@@ -535,7 +570,7 @@ export default function Provider(props) {
         return result;
       }
     });
-  }, [filterDataHandler, handleSubmitCall, id, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, setSharedData, transformOut]);
+  }, [clearData, filterDataHandler, handleSubmitCall, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, transformOut]);
   const fieldEventListenersRef = useRef([]);
   const setFieldEventListener = useCallback((path, type, callback) => {
     fieldEventListenersRef.current = fieldEventListenersRef.current.filter(({
@@ -616,6 +651,7 @@ export default function Provider(props) {
       setData,
       filterDataHandler,
       addOnChangeHandler,
+      setHandleSubmit,
       scrollToTop,
       schema,
       disabled,
@@ -629,6 +665,7 @@ export default function Provider(props) {
       hasVisibleError: Object.keys(hasVisibleErrorRef.current).length > 0,
       fieldPropsRef,
       valuePropsRef,
+      mountedFieldPathsRef,
       ajvInstance: ajvRef.current,
       id,
       data: internalDataRef.current,
@@ -737,4 +774,5 @@ function useFormStatusBuffer(props) {
     bufferedFormState: stateRef.current
   };
 }
+export const clearedData = Object.freeze({});
 //# sourceMappingURL=Provider.js.map