@dnb/eufemia 10.45.0 → 10.47.0

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

@@ -14,14 +14,18 @@ export interface Props<Data extends JsonObject> extends IsolationProviderProps<D
      * Unique ID to connect with a GlobalStatus
      */
     globalStatusId?: string;
+    /**
+     * Source data, will be used instead of defaultData, and leading to updates if changed after mount
+     */
+    data?: Data;
     /**
      * Default source data, only used if no other source is available, and not leading to updates if changed after mount
      */
     defaultData?: Data;
     /**
-     * Source data, will be used instead of defaultData, and leading to updates if changed after mount
+     * Empty data, used to clear the data set.
      */
-    data?: Data;
+    emptyData?: unknown;
     /**
      * JSON Schema to validate the data against.
      */
@@ -35,13 +39,9 @@ export interface Props<Data extends JsonObject> extends IsolationProviderProps<D
      */
     errorMessages?: CustomErrorMessagesWithPaths;
     /**
-     * Filter the `onSubmit` output data, based on your criteria: `({ path, value, data, props, internal }) => !props?.disabled`. It will iterate on each data entry (/path). Return false to exclude the entry.
+     * @deprecated Use the `filterData` in the second event parameter in the `onSubmit` or `onChange` events.
      */
     filterSubmitData?: FilterData;
-    /**
-     * @deprecated Use `filterSubmitData` instead
-     */
-    filterData?: FilterData;
     /**
      * Transform the data context (internally as well) based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).
      */

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

@@ -13,14 +13,13 @@ var _jsonPointer = _interopRequireDefault(require("json-pointer"));
 var _ajv = require("../../utils/ajv");
 var _helpers = require("../../../../shared/helpers");
 var _FieldProps = _interopRequireDefault(require("../../Form/FieldProps"));
-var _useMountEffect = _interopRequireDefault(require("../../../../shared/helpers/useMountEffect"));
 var _useUpdateEffect = _interopRequireDefault(require("../../../../shared/helpers/useUpdateEffect"));
 var _isAsync = require("../../../../shared/helpers/isAsync");
 var _useSharedState = require("../../../../shared/helpers/useSharedState");
 var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation"));
 var _Context = _interopRequireDefault(require("../Context"));
 var _structuredClone = _interopRequireDefault(require("@ungap/structured-clone"));
-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"];
+const _excluded = ["id", "globalStatusId", "defaultData", "emptyData", "data", "schema", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "onCommit", "onClear", "scrollTopOnSubmit", "minimumAsyncBehaviorTime", "asyncSubmitTimeout", "sessionStorageId", "ajvInstance", "transformIn", "transformOut", "filterSubmitData", "locale", "translations", "required", "errorMessages", "isolate", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,6 +39,7 @@ function Provider(props) {
       id,
       globalStatusId = 'main',
       defaultData,
+      emptyData,
       data,
       schema,
       onChange,
@@ -57,7 +57,6 @@ function Provider(props) {
       transformIn,
       transformOut,
       filterSubmitData,
-      filterData,
       locale,
       translations,
       required,
@@ -256,13 +255,16 @@ function Provider(props) {
     }
     return data;
   }, []);
-  const filterDataHandler = (0, _react.useCallback)(function (data) {
-    let filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : filterData || filterSubmitData;
+  const filterDataHandler = (0, _react.useCallback)((data, filter) => {
     if (filter) {
       return mutateDataHandler(data, filter, true);
     }
     return data;
-  }, [filterData, filterSubmitData, mutateDataHandler]);
+  }, [mutateDataHandler]);
+  const filterData = (0, _react.useCallback)(function (filter) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : internalDataRef.current;
+    return filterDataHandler(data, filter);
+  }, [filterDataHandler]);
   const fieldPropsRef = (0, _react.useRef)({});
   const valuePropsRef = (0, _react.useRef)({});
   const setFieldProps = (0, _react.useCallback)((path, props) => {
@@ -344,11 +346,11 @@ function Provider(props) {
         setShowAllErrors,
         setSubmitState
       });
-      if (filterData || filterSubmitData) {
+      if (filterSubmitData) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
-  }, [extendAttachment, filterData, filterDataHandler, filterSubmitData, hasErrors, hasFieldError, id, rerenderUseDataHook, setShowAllErrors, setSubmitState]);
+  }, [extendAttachment, filterDataHandler, filterSubmitData, hasErrors, hasFieldError, id, rerenderUseDataHook, setShowAllErrors, setSubmitState]);
   const storeInSession = (0, _react.useMemo)(() => {
     return (0, _helpers.debounce)(() => {
       var _window$sessionStorag2;
@@ -376,7 +378,7 @@ function Provider(props) {
     internalDataRef.current = newData;
     if (id) {
       extendSharedData === null || extendSharedData === void 0 ? void 0 : extendSharedData(newData);
-      if (filterData || filterSubmitData) {
+      if (filterSubmitData) {
         rerenderUseDataHook === null || rerenderUseDataHook === void 0 ? void 0 : rerenderUseDataHook();
       }
     }
@@ -384,7 +386,7 @@ function Provider(props) {
       storeInSession();
     }
     forceUpdate();
-  }, [extendSharedData, filterData, filterSubmitData, id, mutateDataHandler, rerenderUseDataHook, sessionStorageId, storeInSession, transformIn]);
+  }, [extendSharedData, filterSubmitData, id, mutateDataHandler, rerenderUseDataHook, sessionStorageId, storeInSession, transformIn]);
   const setData = (0, _react.useCallback)(newData => {
     internalDataRef.current = newData;
     forceUpdate();
@@ -399,6 +401,22 @@ function Provider(props) {
     } else {
       onPathChange === null || onPathChange === void 0 ? void 0 : onPathChange(path, value);
     }
+    for (const itm of fieldEventListenersRef.current) {
+      if (itm.type === 'onPathChange' && itm.path === path) {
+        const {
+          callback
+        } = itm;
+        if ((0, _isAsync.isAsync)(callback)) {
+          await callback({
+            value
+          });
+        } else {
+          callback({
+            value
+          });
+        }
+      }
+    }
   }, [onPathChange, updateDataValue]);
   const handlePathChange = (0, _react.useCallback)(async function (path) {
     let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_undefined_';
@@ -411,19 +429,22 @@ function Provider(props) {
     showAllErrorsRef.current = false;
     validateData();
     const data = internalDataRef.current;
+    const options = {
+      filterData
+    };
     const transformedData = transformOut ? mutateDataHandler(data, transformOut) : data;
     for (const cb of changeHandlerStackRef.current) {
       if ((0, _isAsync.isAsync)(onChange)) {
-        await cb(transformedData);
+        await cb(transformedData, options);
       } else {
-        cb(transformedData);
+        cb(transformedData, options);
       }
     }
     if ((0, _isAsync.isAsync)(onChange)) {
-      return await onChange(transformedData);
+      return await onChange(transformedData, options);
     }
-    return onChange === null || onChange === void 0 ? void 0 : onChange(transformedData);
-  }, [handlePathChangeUnvalidated, mutateDataHandler, onChange, transformOut, validateData]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(transformedData, options);
+  }, [filterData, handlePathChangeUnvalidated, mutateDataHandler, onChange, transformOut, validateData]);
   const changeHandlerStackRef = (0, _react.useRef)([]);
   const addOnChangeHandler = (0, _react.useCallback)(callback => {
     const exists = changeHandlerStackRef.current.some(cb => {
@@ -449,34 +470,35 @@ function Provider(props) {
     }
   }, []);
   const clearData = (0, _react.useCallback)(() => {
-    internalDataRef.current = clearedData;
+    internalDataRef.current = emptyData !== null && emptyData !== void 0 ? emptyData : 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]);
+  }, [emptyData, id, onClear, setSharedData]);
   const handleSubmitCall = (0, _react.useCallback)(async args => {
     const {
       onSubmit,
-      enableAsyncBehaviour,
+      enableAsyncBehavior,
       skipFieldValidation,
       skipErrorCheck
     } = args;
     setSubmitState({
       error: undefined
     });
-    const asyncBehaviorIsEnabled = (skipErrorCheck ? true : !hasErrors() || hasFieldState('pending')) && (enableAsyncBehaviour || hasFieldWithAsyncValidator());
+    const asyncBehaviorIsEnabled = (skipErrorCheck ? true : !hasErrors() || hasFieldState('pending')) && (enableAsyncBehavior || hasFieldWithAsyncValidator());
     if (asyncBehaviorIsEnabled) {
       setFormState('pending');
     }
     if (!skipFieldValidation) {
-      for (const {
-        path,
-        type,
-        callback
-      } of fieldEventListenersRef.current) {
+      for (const item of fieldEventListenersRef.current) {
+        const {
+          path,
+          type,
+          callback
+        } = item;
         if (type === 'onSubmit' && mountedFieldPathsRef.current.includes(path)) {
           if (asyncBehaviorIsEnabled) {
             await callback();
@@ -555,14 +577,16 @@ function Provider(props) {
       formElement = null
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     handleSubmitCall({
-      enableAsyncBehaviour: (0, _isAsync.isAsync)(onSubmit),
+      enableAsyncBehavior: (0, _isAsync.isAsync)(onSubmit),
       onSubmit: async () => {
         if (handleSubmitListeners()) {
           return;
         }
         const data = internalDataRef.current;
-        const filteredData = filterDataHandler(transformOut ? mutateDataHandler(data, transformOut) : data);
-        const opts = {
+        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);
@@ -577,9 +601,9 @@ function Provider(props) {
         };
         let result = undefined;
         if ((0, _isAsync.isAsync)(onSubmit)) {
-          result = await onSubmit(filteredData, opts);
+          result = await onSubmit(filteredData, options);
         } else {
-          result = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredData, opts);
+          result = onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(filteredData, options);
         }
         const completeResult = await (onSubmitComplete === null || onSubmitComplete === void 0 ? void 0 : onSubmitComplete(filteredData, result));
         if (completeResult) {
@@ -591,15 +615,16 @@ function Provider(props) {
         return result;
       }
     });
-  }, [clearData, filterDataHandler, handleSubmitCall, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, transformOut]);
+  }, [clearData, filterData, filterDataHandler, filterSubmitData, handleSubmitCall, handleSubmitListeners, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, transformOut]);
   const fieldEventListenersRef = (0, _react.useRef)([]);
   const setFieldEventListener = (0, _react.useCallback)((path, type, callback) => {
     fieldEventListenersRef.current = fieldEventListenersRef.current.filter(_ref4 => {
       let {
         path: p,
-        type: t
+        type: t,
+        callback: c
       } = _ref4;
-      return !(p === path && t === type);
+      return !(p === path && t === type && c === callback);
     });
     fieldEventListenersRef.current.push({
       path,
@@ -613,13 +638,13 @@ function Provider(props) {
     (_onSubmitContinueRef$ = onSubmitContinueRef.current) === null || _onSubmitContinueRef$ === void 0 ? void 0 : _onSubmitContinueRef$.call(onSubmitContinueRef);
     onSubmitContinueRef.current = null;
   }
-  (0, _useMountEffect.default)(() => {
+  (0, _react.useEffect)(() => {
     if (schema) {
       var _ajvRef$current;
       ajvValidatorRef.current = (_ajvRef$current = ajvRef.current) === null || _ajvRef$current === void 0 ? void 0 : _ajvRef$current.compile(schema);
     }
     validateData();
-  });
+  }, [schema, validateData]);
   (0, _useUpdateEffect.default)(() => {
     if (schema && schema !== cacheRef.current.schema) {
       var _ajvRef$current2;
@@ -691,6 +716,7 @@ function Provider(props) {
       ajvInstance: ajvRef.current,
       id,
       data: internalDataRef.current,
+      internalDataRef,
       props
     }, rest)
   }, _react.default.createElement(_FieldProps.default, {