@dnb/eufemia 10.48.0 → 10.50.0

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

@@ -4,10 +4,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addListPath = addListPath;
 exports.clearedData = void 0;
 exports.default = Provider;
-exports.removeListPath = removeListPath;
 var _react = _interopRequireWildcard(require("react"));
 var _jsonPointer = _interopRequireDefault(require("json-pointer"));
 var _ajv = require("../../utils/ajv");
@@ -76,7 +74,7 @@ function Provider(props) {
   }
   const translation = (0, _useTranslation.default)().Field;
   const ajvRef = (0, _react.useRef)((0, _ajv.makeAjvInstance)(ajvInstance));
-  const mountedFieldPathsRef = (0, _react.useRef)([]);
+  const mountedFieldsRef = (0, _react.useRef)({});
   const hasVisibleErrorRef = (0, _react.useRef)({});
   const errorsRef = (0, _react.useRef)();
   const showAllErrorsRef = (0, _react.useRef)(false);
@@ -84,7 +82,7 @@ function Provider(props) {
     showAllErrorsRef.current = showAllErrors;
     forceUpdate();
   }, []);
-  const setHasVisibleError = (0, _react.useCallback)((path, hasError) => {
+  const setVisibleError = (0, _react.useCallback)((path, hasError) => {
     if (hasError) {
       hasVisibleErrorRef.current[path] = hasError;
     } else {
@@ -139,14 +137,22 @@ function Provider(props) {
     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 = (0, _react.useCallback)(state => {
-    return mountedFieldPathsRef.current.some(path => {
-      return checkFieldStateFor(path, state);
-    });
+    for (const path in mountedFieldsRef.current) {
+      const item = mountedFieldsRef.current[path];
+      if (item.isMounted && checkFieldStateFor(path, state)) {
+        return true;
+      }
+    }
+    return false;
   }, [checkFieldStateFor]);
   const hasFieldError = (0, _react.useCallback)(path => {
-    return mountedFieldPathsRef.current.some(p => {
-      return p === path && checkFieldStateFor(p, 'error');
-    });
+    for (const p in mountedFieldsRef.current) {
+      const item = mountedFieldsRef.current[path];
+      if (item.isMounted && p === path && checkFieldStateFor(path, 'error')) {
+        return true;
+      }
+    }
+    return false;
   }, [checkFieldStateFor]);
   const hasErrors = (0, _react.useCallback)(() => {
     return hasFieldState('error');
@@ -255,6 +261,28 @@ function Provider(props) {
     }
     return data;
   }, []);
+  const visibleDataHandler = (0, _react.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) && _jsonPointer.default.has(data, path)) {
+        _jsonPointer.default.set(visibleData, path, _jsonPointer.default.get(data, path));
+      }
+    }
+    if (keepPaths) {
+      keepPaths.forEach(path => {
+        if (_jsonPointer.default.has(data, path)) {
+          _jsonPointer.default.set(visibleData, path, _jsonPointer.default.get(data, path));
+        }
+      });
+    }
+    return visibleData;
+  }, []);
   const filterDataHandler = (0, _react.useCallback)((data, filter) => {
     if (filter) {
       return mutateDataHandler(data, filter, true);
@@ -275,7 +303,8 @@ function Provider(props) {
   }, []);
   const hasFieldWithAsyncValidator = (0, _react.useCallback)(() => {
     for (const path in fieldPropsRef.current) {
-      if (mountedFieldPathsRef.current.includes(path)) {
+      var _mountedFieldsRef$cur;
+      if ((_mountedFieldsRef$cur = mountedFieldsRef.current[path]) !== null && _mountedFieldsRef$cur !== void 0 && _mountedFieldsRef$cur.isMounted) {
         const props = fieldPropsRef.current[path];
         if ((0, _isAsync.isAsync)(props.validator) || (0, _isAsync.isAsync)(props.onBlurValidator)) {
           return true;
@@ -340,6 +369,7 @@ function Provider(props) {
   useLayoutEffect(() => {
     if (id) {
       extendAttachment === null || extendAttachment === void 0 ? void 0 : extendAttachment({
+        visibleDataHandler,
         filterDataHandler,
         hasErrors,
         hasFieldError,
@@ -350,28 +380,14 @@ function Provider(props) {
         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 = (0, _react.useMemo)(() => {
     return (0, _helpers.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 = (0, _react.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 = (0, _structuredClone.default)(givenData);
-    } catch (e) {
-      newData = givenData;
-    }
-    if (path !== '/') {
-      _jsonPointer.default.set(newData, path, value);
-    }
+  const setData = (0, _react.useCallback)(newData => {
     if (transformIn) {
       newData = mutateDataHandler(newData, transformIn);
     }
@@ -387,10 +403,23 @@ function Provider(props) {
     }
     forceUpdate();
   }, [extendSharedData, filterSubmitData, id, mutateDataHandler, rerenderUseDataHook, sessionStorageId, storeInSession, transformIn]);
-  const setData = (0, _react.useCallback)(newData => {
-    internalDataRef.current = newData;
-    forceUpdate();
-  }, []);
+  const updateDataValue = (0, _react.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 = (0, _structuredClone.default)(givenData);
+    } catch (e) {
+      newData = givenData;
+    }
+    if (path !== '/') {
+      _jsonPointer.default.set(newData, path, value);
+    }
+    setData(newData);
+  }, [setData]);
   const handlePathChangeUnvalidated = (0, _react.useCallback)(async (path, value) => {
     if (!path) {
       return null;
@@ -454,11 +483,20 @@ function Provider(props) {
       changeHandlerStackRef.current.push(callback);
     }
   }, []);
-  const handleMountField = (0, _react.useCallback)(path => {
-    mountedFieldPathsRef.current = addListPath(mountedFieldPathsRef.current, path);
-  }, []);
-  const handleUnMountField = (0, _react.useCallback)(path => {
-    mountedFieldPathsRef.current = removeListPath(mountedFieldPathsRef.current, path);
+  const setMountedFieldState = (0, _react.useCallback)((path, state) => {
+    if (!mountedFieldsRef.current[path]) {
+      mountedFieldsRef.current[path] = _objectSpread({}, state);
+    } else {
+      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 = (0, _react.useCallback)(() => {
     if (typeof window !== 'undefined') {
@@ -494,12 +532,13 @@ function Provider(props) {
     }
     if (!skipFieldValidation) {
       for (const item of fieldEventListenersRef.current) {
+        var _mountedFieldsRef$cur2;
         const {
           path,
           type,
           callback
         } = item;
-        if (type === 'onSubmit' && mountedFieldPathsRef.current.includes(path)) {
+        if (type === 'onSubmit' && (_mountedFieldsRef$cur2 = mountedFieldsRef.current[path]) !== null && _mountedFieldsRef$cur2 !== void 0 && _mountedFieldsRef$cur2.isMounted) {
           if (asyncBehaviorIsEnabled) {
             await callback();
           } else {
@@ -554,7 +593,6 @@ function Provider(props) {
       onSubmitRequest === null || onSubmitRequest === void 0 ? void 0 : onSubmitRequest();
       setShowAllErrors(true);
     }
-    return internalDataRef.current;
   }, [clearData, hasErrors, hasFieldState, hasFieldWithAsyncValidator, isolate, onCommit, onSubmitRequest, setFormState, setShowAllErrors, setSubmitState]);
   const handleSubmitListenersRef = (0, _react.useRef)([]);
   const setHandleSubmit = (0, _react.useCallback)(callback => {
@@ -585,8 +623,12 @@ function Provider(props) {
         const data = internalDataRef.current;
         const mutatedData = transformOut ? mutateDataHandler(data, transformOut) : data;
         const filteredData = filterSubmitData ? filterDataHandler(mutatedData, filterSubmitData) : mutatedData;
+        const reduceToVisibleFields = (data, options) => {
+          return visibleDataHandler(transformOut ? mutateDataHandler(data, transformOut) : data, options);
+        };
         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);
@@ -615,7 +657,7 @@ function Provider(props) {
         return result;
       }
     });
-  }, [clearData, filterData, filterDataHandler, filterSubmitData, handleSubmitCall, handleSubmitListeners, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, transformOut]);
+  }, [clearData, filterData, filterDataHandler, filterSubmitData, handleSubmitCall, handleSubmitListeners, mutateDataHandler, onSubmit, onSubmitComplete, scrollToTop, scrollTopOnSubmit, sessionStorageId, transformOut, visibleDataHandler]);
   const fieldEventListenersRef = (0, _react.useRef)([]);
   const setFieldEventListener = (0, _react.useCallback)((path, type, callback) => {
     fieldEventListenersRef.current = fieldEventListenersRef.current.filter(_ref4 => {
@@ -678,13 +720,12 @@ function Provider(props) {
       handlePathChange,
       handlePathChangeUnvalidated,
       handleSubmit,
-      handleMountField,
-      handleUnMountField,
+      setMountedFieldState,
       handleSubmitCall,
       setFormState,
       setSubmitState,
       setShowAllErrors,
-      setHasVisibleError,
+      setVisibleError,
       setFieldEventListener,
       setFieldState,
       setFieldError,
@@ -697,6 +738,7 @@ function Provider(props) {
       updateDataValue,
       setData,
       clearData,
+      visibleDataHandler,
       filterDataHandler,
       addOnChangeHandler,
       setHandleSubmit,
@@ -713,7 +755,7 @@ function Provider(props) {
       hasVisibleError: Object.keys(hasVisibleErrorRef.current).length > 0,
       fieldPropsRef,
       valuePropsRef,
-      mountedFieldPathsRef,
+      mountedFieldsRef,
       ajvInstance: ajvRef.current,
       id,
       data: internalDataRef.current,
@@ -735,12 +777,6 @@ function Provider(props) {
     translations: translations ? translations : undefined
   }, children));
 }
-function addListPath(paths, path) {
-  return paths.includes(path) ? paths : paths.concat(path);
-}
-function removeListPath(paths, path) {
-  return paths.filter(thisPath => thisPath !== path);
-}
 function useFormStatusBuffer(props) {
   const {
     formState,